defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'GraphQLIntegration' of https://gitea.callysta-engineering.com/APKT/eis into dev-bagus

Browse Source
This commit is contained in:
kur0nek-o 2024-02-21 15:07:33 +07:00
commit 00d03c1b7e
71 changed files with 2133 additions and 1231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DatePicker.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
// import { useDateStore } from '@/stores/date';
import { PhCalendarBlank } from '@phosphor-icons/vue' import { PhCalendarBlank } from '@phosphor-icons/vue'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'

1
src/components/Form/Filters.vue
View File

@ -1,3 +1,4 @@
<!-- ss -->
<script setup lang="ts"> <script setup lang="ts">
// components // components
import Button from '@/components/Button.vue' import Button from '@/components/Button.vue'

23
src/components/Form/FiltersType/Type1.vue
View File

@ -1,27 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref, watch } from 'vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { import {
selectedUid, selectedUid,
selectedUp3Posko, selectedUp3Posko,
selectedPosko, selectedPosko,
fetchUid,
itemsUid, itemsUid,
itemsUp3, itemsUp3,
itemsPosko itemsPosko,
fetchUid
} from './reference' } from './reference'
import { onMounted, ref, watch } from 'vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah' const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan' const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko' const poskoPlaceholder = 'Semua Posko'
const uppp = ref({ id: 0, name: uppPlaceholder }) const uppp = ref({ id: 0, name: uppPlaceholder })
const uid = ref({ id: 0, name: uidPlaceholder }) const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder }) const posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters']) const emit = defineEmits(['update:filters'])
const data = ref({ const data = ref({
uid: uid.value, uid: uid.value,
up3: uppp.value, up3: uppp.value,
@ -54,8 +50,8 @@ const setPosko = (value: any) => {
} }
onMounted(() => { onMounted(() => {
emit('update:filters', data.value)
fetchUid() fetchUid()
emit('update:filters', data.value)
}) })
</script> </script>
@ -65,12 +61,7 @@ onMounted(() => {
>Unit Induk Distribusi/Wilayah:</label >Unit Induk Distribusi/Wilayah:</label
> >
<Select <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
:data="itemsUid"
@update:selected="setUid($event)"
:placeholder="uidPlaceholder"
:selected="uid"
/>
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type10.vue
View File

@ -29,7 +29,10 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type11.vue
View File

@ -29,7 +29,10 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type12.vue
View File

@ -30,7 +30,10 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type13.vue
View File

@ -30,7 +30,10 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type14.vue
View File

@ -29,6 +29,9 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> </template>

5
src/components/Form/FiltersType/Type15.vue
View File

@ -20,6 +20,9 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> </template>

9
src/components/Form/FiltersType/Type16.vue
View File

@ -1,6 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
fetchMedia();
</script> </script>
<template> <template>
@ -27,12 +29,15 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
<Select placeholder="Semua Media" /> <Select placeholder="Semua Media" :data="itemsMedia" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> </template>

5
src/components/Form/FiltersType/Type17.vue
View File

@ -8,7 +8,10 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

6
src/components/Form/FiltersType/Type18.vue
View File

@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue' import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference'; import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
fetchData(); fetchData();
const departments = [ const departments = [
@ -20,13 +20,13 @@ const departments = [
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" /> <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" /> placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div> </div>

6
src/components/Form/FiltersType/Type2.vue
View File

@ -1,8 +1,7 @@
<!-- <script setup lang="ts"> <!-- <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference'; import { selectedUid, selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { ref } from 'vue'; import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'; const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'; const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'; const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@ -33,6 +32,7 @@ const setUlp = (value: any) => {
ulp.value = value; ulp.value = value;
selectedUp3Ulp(value); selectedUp3Ulp(value);
}; };
</script> </script>
<template> <template>
@ -45,7 +45,7 @@ const setUlp = (value: any) => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" /> <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

9
src/components/Form/FiltersType/Type3.vue
View File

@ -1,7 +1,7 @@
<!-- <script setup lang="ts"> <!-- <script setup lang="ts">
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference'; import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue'; import { ref } from 'vue';
fetchData(); fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'; const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@ -33,7 +33,7 @@ const setUlp = (value: any) => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" /> <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -51,7 +51,10 @@ const setUlp = (value: any) => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> --> </template> -->
<template></template> <template></template>

5
src/components/Form/FiltersType/Type4.vue
View File

@ -37,6 +37,9 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> </template>

5
src/components/Form/FiltersType/Type5.vue
View File

@ -27,6 +27,9 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> </template>

11
src/components/Form/FiltersType/Type6.vue
View File

@ -2,7 +2,7 @@
import InputNumber from '@/components/Form/InputNumber.vue' import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue' import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue' import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference'; import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport'; import { useTotalReport } from '@/stores/totalReport';
fetchData(); fetchData();
const changeMinReport = (value: any) => { const changeMinReport = (value: any) => {
@ -17,7 +17,7 @@ import { useTotalReport } from '@/stores/totalReport';
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah"/> <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -25,7 +25,7 @@ import { useTotalReport } from '@/stores/totalReport';
>Unit Pelaksanaan Pelayanan Pelanggan:</label >Unit Pelaksanaan Pelayanan Pelanggan:</label
> >
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" /> <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -37,7 +37,10 @@ import { useTotalReport } from '@/stores/totalReport';
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type7.vue
View File

@ -61,7 +61,10 @@ import { ref } from 'vue';
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

5
src/components/Form/FiltersType/Type8.vue
View File

@ -21,6 +21,9 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
</template> </template>

5
src/components/Form/FiltersType/Type9.vue
View File

@ -28,7 +28,10 @@
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <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> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker /> <DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

58
src/components/Form/FiltersType/reference.ts
View File

@ -1,12 +1,11 @@
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts' import { usePostsStore } from '@/stores/posts'
import { useUp3Store } from '@/stores/up3'
import { useRegionStore } from '@/stores/region' import { useRegionStore } from '@/stores/region'
import { useUlpStore } from '@/stores/ulp' import { useUlpStore } from '@/stores/ulp'
import { useUp3Store } from '@/stores/up3'
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
import { ref } from 'vue'
interface Item { interface Item {
id: number id: any
name: any name: any
} }
const months = [ const months = [
@ -29,15 +28,30 @@ const years = ref<Item[]>([])
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
years.value.push({ id: year - i, name: year - i }) years.value.push({ id: year - i, name: year - i })
} }
// Create a ref to store the items
const itemsUid = ref<Item[]>([]) const itemsUid = ref<Item[]>([])
const itemsUp3 = ref<Item[]>([]) const itemsUp3 = ref<Item[]>([])
const itemsPosko = ref<Item[]>([]) const itemsPosko = ref<Item[]>([])
const itemsUlp = ref<Item[]>([]) const itemsUlp = ref<Item[]>([])
const itemsRegional = ref<Item[]>([]) const itemsRegional = ref<Item[]>([])
const itemsMedia = ref<Item[]>([]) const itemsMedia = ref<Item[]>([])
// Fetch data from the API using Axios
const fetchMedia = () => {
itemsMedia.value = [
{ id: 'Ulasan Aplikasi PLN Mobile', name: 'Ulasan Aplikasi PLN Mobile' },
{ id: 'Twitter', name: 'Twitter' },
{ id: 'PLN Mobile', name: 'PLN Mobile' },
{ id: 'Media Massa', name: 'Media Massa' },
{ id: 'Live Chat Website', name: 'Live Chat Website' },
{ id: 'Live Chat PLN Mobile', name: 'Live Chat PLN Mobile' },
{ id: 'Instagram', name: 'Instagram' },
{ id: 'Facebook', name: 'Facebook' },
{ id: 'Email', name: 'Email' },
{ id: 'EMS', name: 'EMS' },
{ id: 'Datang ke Kantor', name: 'Datang ke Kantor' },
{ id: 'Call ke Kantor Unit', name: 'Call ke Kantor Unit' },
{ id: 'Call PLN 123', name: 'Call PLN 123' }
]
}
// Fetch data from the API using Axios // Fetch data from the API using Axios
const fetchUid = async () => { const fetchUid = async () => {
try { try {
@ -84,6 +98,31 @@ const fetchDataPosko = async (up3: number) => {
console.error('Error fetching data:', error) console.error('Error fetching data:', error)
} }
} }
const fetchRegional = () => {
itemsRegional.value = [
{ id: '1', name: 'Wilayah Sumatera' },
{ id: '2', name: 'Wilayah Jawa Bali' },
{ id: '3', name: 'Wilayah Kalimantan' },
{ id: '4', name: 'Wilayah Sulawesi' },
{ id: '5', name: 'Wilayah Nusa Tenggara' },
{ id: '6', name: 'Wilayah Maluku Papua' }
]
}
const fetchStatus = (data: any) => {
const status = [
{ id: '8', name: 'Selesai' },
{ id: '7', name: 'Nyala' },
{ id: '6', name: 'Pengalihan' },
{ id: '5', name: 'Dialihkan' },
{ id: '4', name: 'Dalam Pengerjaan' },
{ id: '3', name: 'Dalam Perjalanan' },
{ id: '2', name: 'Penugasan Regu' },
{ id: '1', name: 'lapor' }
]
const filteredStatus = status.find((item) => item.id == data)
const name = filteredStatus ? filteredStatus.name : null
return name
}
const selectedUid = (value: any) => { const selectedUid = (value: any) => {
useRegionStore().setData(value.id) useRegionStore().setData(value.id)
fetchDataUp3(value.id) fetchDataUp3(value.id)
@ -111,7 +150,10 @@ export {
selectedUp3Ulp, selectedUp3Ulp,
selectedPosko, selectedPosko,
selectedUlp, selectedUlp,
fetchRegional,
fetchUid, fetchUid,
fetchMedia,
fetchStatus,
itemsUid, itemsUid,
itemsUp3, itemsUp3,
itemsPosko, itemsPosko,

125
src/components/Pages/Gangguan/Table_1.vue
View File

@ -1,5 +1,13 @@
<template> <template>
<Filters @run-search="() => console.log(filters)" class="mb-4"> <Filters
@run-search="
() => {
console.log(filters)
filterData(filters)
}
"
class="mb-4"
>
<Type1 <Type1
@update:filters=" @update:filters="
(value) => { (value) => {
@ -53,23 +61,6 @@
:allow-export-selected-data="false" :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"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
cell-template="data"
/>
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
:width="150" :width="150"
@ -82,7 +73,7 @@
css-class="custom-table-column" css-class="custom-table-column"
:width="150" :width="150"
alignment="center" alignment="center"
data-field="tanggal_laporan" data-field="waktu_lapor"
caption="Tgl Lapor" caption="Tgl Lapor"
cell-template="data" cell-template="data"
/> />
@ -90,7 +81,7 @@
css-class="custom-table-column" css-class="custom-table-column"
:width="150" :width="150"
alignment="center" alignment="center"
data-field="tanggal_dialihkan" data-field="waktu_dialihkan"
caption="Tgl Dialihkan" caption="Tgl Dialihkan"
cell-template="data" cell-template="data"
/> />
@ -98,7 +89,7 @@
css-class="custom-table-column" css-class="custom-table-column"
:width="150" :width="150"
alignment="center" alignment="center"
data-field="tanggal_respon" data-field="waktu_response"
caption="Tgl Response" caption="Tgl Response"
cell-template="data" cell-template="data"
/> />
@ -106,7 +97,7 @@
css-class="custom-table-column" css-class="custom-table-column"
:width="150" :width="150"
alignment="center" alignment="center"
data-field="tanggal_recovery" data-field="waktu_recovery"
caption="Tgl Recovery" caption="Tgl Recovery"
cell-template="data" cell-template="data"
/> />
@ -232,22 +223,22 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
<InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
<InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -319,10 +310,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// filters components
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 { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -341,21 +330,15 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useDialogStore } from '@/stores/dialog'
import { useDateStore } from '@/stores/date'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import { useSearchStore } from '@/stores/filtersAction' import { fetchStatus } from '@/components/Form/FiltersType/reference'
import { usePostsStore } from '@/stores/posts'
import { useUp3Store } from '@/stores/up3'
import { useRegionStore } from '@/stores/region'
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 dialog = useDialogStore()
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
@ -404,6 +387,9 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
alamat_pelapor alamat_pelapor
durasi_recovery_time durasi_recovery_time
durasi_response_time durasi_response_time
waktu_dialihkan
waktu_recovery
waktu_response
id_gangguan id_gangguan
idpel_nometer idpel_nometer
keterangan_pelapor keterangan_pelapor
@ -429,50 +415,47 @@ const { onResult, onError, loading, refetch } = useQuery(
idUp3: 0 idUp3: 0
} }
) )
// const reportButton = useSearchStore()
// const detected = computed(() => reportButton.isTriggerChange) // const detected = computed(() => reportButton.isTriggerChange)
// watch(detected, () => { const filterData = (filters: any) => {
// const dateValue = useDateStore().getDateValue().split(' s/d ') console.log(filters)
// const posko = usePostsStore().getData() ? usePostsStore().getData() : '' const dateValue = filters().periode.split(' s/d ')
// const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0 const posko = filters().posko ? filters().posko : ''
// const uid = useRegionStore().getData() ? useRegionStore().getData() : 0 const up3 = filters().up3 ? filters().up3 : 0
// refetch({ const uid = filters().uid ? filters().uid : 0
// dateFrom: dateValue[0].split('-').reverse().join('-'), refetch({
// dateTo: dateValue[1].split('-').reverse().join('-'), dateFrom: dateValue[0].split('-').reverse().join('-'),
// posko: posko, dateTo: dateValue[1].split('-').reverse().join('-'),
// idUid: uid, posko: posko,
// idUp3: up3 idUid: uid,
// }) idUp3: up3
// onResult((queryResult) => { })
// if (queryResult.data != undefined) { onResult((queryResult) => {
// queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { if (queryResult.data != undefined) {
// data.value = [ queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
// ...data.value, data.value = [
// { ...data.value,
// ...item, {
// pembuat_laporan: '-' ...item,
// } status_akhir: fetchStatus(item.status_akhir)
// ] }
// }) ]
// } })
// console.log(queryResult.data) }
// console.log(queryResult.loading) console.log(queryResult.data)
// console.log(queryResult.networkStatus) console.log(queryResult.loading)
// }) console.log(queryResult.networkStatus)
// onError((error) => { })
// console.log(error) onError((error) => {
// }) console.log(error)
// }) })
}
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
dataDetail.value = data dataDetail.value = data
console.log(data) console.log(data)
} }
const showData = () => { const showData = () => {
showDetail.value = true showDetail.value = true
} }
// filters handler
const filters = ref() const filters = ref()
</script> </script>

160
src/components/Pages/Gangguan/Table_10.vue
View File

@ -1,10 +1,10 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 --> <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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" />
@ -16,62 +16,60 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number"
caption="No" />
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)" <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" 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" <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" 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" <DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" 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" <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" 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=">SLA" <DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" 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" <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
css-class="custom-table-column" /> caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="Min" css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" 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=">SLA" <DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
css-class="custom-table-column" /> caption="≤SLA" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -82,56 +80,69 @@
import { computed, onMounted, ref, watch } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import gql from 'graphql-tag'; import gql from 'graphql-tag'
import { useDateStore } from '@/stores/date' import { useDateStore } from '@/stores/date'
import { useSearchStore } from '@/stores/filtersAction' import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts' import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region' import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3' import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
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 GET_REKAP_JENIS_GANGGUAN_SE004 = gql` const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
query daftarGangguanRecoveryTime( query rekapitulasiJenisGangguanSE004(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
daftarKeluhanRecoveryTime( rekapitulasiJenisGangguanSE004(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
alamat_pelapor sub_kelompok
durasi_recovery_time total
durasi_response_time selesai
id_gangguan persen_selesai
idpel_nometer in_process
keterangan_pelapor persen_in_process
media total_durasi_response
nama_pelapor avg_waktu_response_time
no_laporan max_durasi_response
no_telp_pelapor min_durasi_response
posko diatas_sla_durasi_response
status_akhir dibawah_sla_durasi_response
waktu_recovery total_durasi_recovery
waktu_response avg_waktu_recovery_time
max_durasi_recovery
min_durasi_recovery
diatas_sla_durasi_recovery
dibawah_sla_durasi_recovery
} }
}`; }
const loadingVisible = ref<boolean>(true) `
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -139,7 +150,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -150,7 +161,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -163,15 +174,15 @@ const onExporting = (e: any) => {
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, { const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
dateFrom: new Date().toISOString().slice(0, 10), dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10), dateTo: new Date().toISOString().slice(0, 10),
posko: "", posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) })
const reportButton = useSearchStore() const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange) const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => { watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d '); const dateValue = useDateStore().getDateValue().split(' s/d ')
const posko = usePostsStore().getData() ? usePostsStore().getData() : "" const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0 const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0 const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({ refetch({
@ -179,22 +190,17 @@ watch(detected, () => {
dateTo: dateValue[1].split('-').reverse().join('-'), dateTo: dateValue[1].split('-').reverse().join('-'),
posko, posko,
idUid: uid, idUid: uid,
idUp3: up3, idUp3: up3
}) })
onResult(queryResult => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value, {
...item,
kode: 'Kode'
}];
}) data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
}
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}
}) })
onError(queryError => { onError((queryError) => {
console.log(queryError) console.log(queryError)
}) })
}) })

50
src/components/Pages/Gangguan/Table_14.vue
View File

@ -13,16 +13,13 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" /> :caption="i" css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -31,18 +28,27 @@
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' 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 gql from 'graphql-tag'; import gql from 'graphql-tag'
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 onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -50,7 +56,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -61,7 +67,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -77,16 +83,15 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql` const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
query rekapitulasiGangguanBerdasarkanMedia( query rekapitulasiGangguanBerdasarkanMedia(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanBerdasarkanMedia( rekapitulasiGangguanBerdasarkanMedia(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -127,21 +132,22 @@ query rekapitulasiGangguanBerdasarkanMedia(
tgl8 tgl8
tgl9 tgl9
} }
}`; }
`
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, { const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: "", posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) })
onResult(queryResult => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia; data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

13
src/components/Pages/Gangguan/Table_2.vue
View File

@ -23,11 +23,11 @@
caption="No" /> caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" /> caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" cell-template="data" /> caption="Tgl Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" cell-template="data" /> caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" /> caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
cell-template="data" /> cell-template="data" />
@ -73,21 +73,21 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Lapor: Tanggal Lapor:
</h3> </h3>
<InputText :readonly="true" :value="dataDetail?.tgl_lapor" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Response: Tanggal Response:
</h3> </h3>
<InputText :readonly="true" :value="dataDetail?.tgl_response" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Recovery: Tanggal Recovery:
</h3> </h3>
<InputText :readonly="true" :value="dataDetail?.tgl_recovery" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -272,7 +272,6 @@ watch(detected, () => {
}) })
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
filters.setConfig({ filters.setConfig({
type: 'type-6', type: 'type-6',
}) })

6
src/components/Pages/Gangguan/Table_3.vue
View File

@ -16,11 +16,11 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" /> caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" /> caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" /> caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" /> caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" /> caption="Durasi Response Time" />

6
src/components/Pages/Gangguan/Table_4.vue
View File

@ -16,11 +16,11 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" /> caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" /> caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" /> caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" /> caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" /> caption="Durasi Response Time" />

6
src/components/Pages/Gangguan/Table_5.vue
View File

@ -16,11 +16,11 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" /> caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" /> caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" /> caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" /> caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" /> caption="Durasi Response Time" />

8
src/components/Pages/Gangguan/Table_6.vue
View File

@ -21,16 +21,16 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" /> caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" /> <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" /> <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" /> caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" /> caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" /> caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" /> caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_media" caption="Tgl Media" /> <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" /> <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
</DxDataGrid> </DxDataGrid>

6
src/components/Pages/Gangguan/Table_7.vue
View File

@ -16,11 +16,11 @@
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" /> caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" /> caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" /> caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" /> caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" /> caption="Durasi Response Time" />

474
src/components/Pages/Gangguan/Table_9.vue
View File

File diff suppressed because it is too large Load Diff

2
src/components/Pages/Keluhan/Table_21.vue
View File

@ -20,7 +20,7 @@
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="tgl_laporan" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"

2
src/components/Pages/Keluhan/Table_22.vue
View File

@ -18,7 +18,7 @@
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"

30
src/components/Pages/Keluhan/Table_23.vue
View File

@ -17,32 +17,32 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> 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="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" 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="" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>

32
src/components/Pages/Keluhan/Table_24.vue
View File

@ -17,33 +17,33 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan" <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" /> 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="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" 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="" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>

123
src/components/Pages/Keluhan/Table_25.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full" <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@ -14,40 +14,41 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
caption="No" />
<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" /> 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="pembuat_laporan" caption="Pembuat Laporan"
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" /> 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="waktu_response" caption="Tgl Response"
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Recovery Time" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" /> <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" <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" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama ULP"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -56,7 +57,17 @@
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, 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 { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -72,7 +83,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -83,7 +94,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -101,55 +112,51 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query daftarKeluhanSelesaiTanpaIdPelanggan query daftarKeluhanSelesaiTanpaIdPelanggan(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
daftarKeluhanSelesaiTanpaIdPelanggan daftarKeluhanSelesaiTanpaIdPelanggan(
(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
in_process alamat_pelapor
indeks_rating durasi_recovery_time
jumlah_non_rating durasi_response_time
jumlah_rating id_keluhan
nama_posko idpel_nometer
persen_in_process keterangan_pelapor
persen_non_rating media
persen_rating nama_pelapor
persen_selesai no_laporan
rating_1 no_telp_pelapor
rating_2 posko
rating_3 status_akhir
rating_4 waktu_recovery
rating_5 waktu_response
regu
selesai
total
} }
}`; }
`
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, { const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: "", posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) })
onResult(queryResult => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan; data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
loadingVisible.value = false loadingVisible.value = false
} }
console.log(queryResult.data) console.log(queryResult.data)

28
src/components/Pages/Keluhan/Table_26.vue
View File

@ -17,31 +17,31 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Telp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" 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="" caption="Tgl Lapor" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Response" <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Recovery" <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Response Time" <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Recovery Time" <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl Media" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Media" <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>

18
src/components/Pages/Keluhan/Table_27.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true"> :word-wrap-enabled="true">
@ -17,29 +17,29 @@
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number" data-type="number"
caption="No" /> caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Contact Center" <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
css-class="custom-table-column" /> 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="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="ULP" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER" <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor" <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Alamat Pelapor" <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Tlp Pelapor" <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor" <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" /> 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="APKT Status" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" 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" <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
css-class="custom-table-column" /> 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="Lapor Ulang" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Sumber Lapor" <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" /> 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="Issue Type" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type" <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
@ -126,7 +126,7 @@ const GET_DATA = gql`
alamat_pelapor alamat_pelapor
durasi_recovery_time durasi_recovery_time
durasi_response_time durasi_response_time
id_keluhan! id_keluhan
idpel_nometer idpel_nometer
keterangan_pelapor keterangan_pelapor
media media
@ -134,7 +134,7 @@ const GET_DATA = gql`
no_laporan no_laporan
no_telp_pelapor no_telp_pelapor
posko posko
status_akhir! status_akhir
waktu_recovery waktu_recovery
waktu_response waktu_response
} }

20
src/components/Pages/Keluhan/Table_28.vue
View File

@ -14,15 +14,15 @@
<DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Response Time" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai" <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress" <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
@ -36,15 +36,15 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA" <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA" <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>

98
src/components/Pages/Keluhan/Table_29.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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" />
@ -13,60 +13,58 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
data-type="number" <DxColumn :width="170" alignment="center" data-field="fungsiBidang" caption="Fungsi Bidang"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" 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" <DxColumn :width="150" alignment="center" data-field="totalSelesai" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persenSelesai" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" 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" <DxColumn :width="150" alignment="center" data-field="totalInProcess" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persenInProcess" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number" caption="Max"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number" caption="Min"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" 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=">SLA" <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number" caption=">SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number" caption="≤SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number" caption="Max"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number" caption="Min"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" 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=">SLA" <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number" caption=">SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number" caption="≤SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -132,47 +130,41 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiKeluhanPerFungsiBidang query rekapitulasiKeluhanPerFungsiBidang(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: String! $posko: String!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiKeluhanPerFungsiBidang rekapitulasiKeluhanPerFungsiBidang(
(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
avg_durasi_dispatch avgDurasiPenyelesaian
avg_durasi_recovery avgDurasiResponse
avg_durasi_response fungsiBidang
id_uid maxDurasiPenyelesaian
id_up3 maxDurasiResponse
max_durasi_dispatch minDurasiPenyelesaian
max_durasi_recovery minDurasiResponse
max_durasi_response persenInProcess
min_durasi_dispatch persenSelesai
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total total
total_diatas_sla_dispatch totalDiatasSlaPenyelesaian
total_diatas_sla_recovery totalDiatasSlaResponse
total_diatas_sla_response totalDibawahSlaPenyelesaian
total_dibawah_sla_dispatch totalDibawahSlaResponse
total_dibawah_sla_recovery totalDurasiPenyelesaian
total_dibawah_sla_response totalDurasiResponse
total_inproses totalInProcess
total_selesai totalSelesai
} }
}` }
`
const loadingVisible = ref<boolean>(true) const loadingVisible = ref<boolean>(true)
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()

34
src/components/Pages/Keluhan/Table_30.vue
View File

@ -19,54 +19,54 @@
<DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan" <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" 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" <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" 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" <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" 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=">SLA" <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" 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=">SLA" <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤SLA"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

211
src/components/Pages/Keluhan/Table_33.vue
View File

@ -1,197 +1,70 @@
<template> <template>
<div> <div>
<DxDataGrid <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
class="max-h-[calc(100vh-140px)]" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:show-column-lines="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
:show-row-lines="false" column-resizing-mode="widget" :word-wrap-enabled="true">
: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 :enabled="true" /> <DxLoadPanel :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 :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
:width="50" caption="NO" css-class="custom-table-column" />
alignment="center" <DxColumn :width="170" alignment="center" data-field="posko" caption="Unit" css-class="custom-table-column" />
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
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 alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
data-field="" css-class="custom-table-column" />
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="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
data-field="" css-class="custom-table-column" />
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> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
data-field="" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
/> 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>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
data-field="" css-class="custom-table-column" />
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> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
data-field="" css-class="custom-table-column" />
data-type="number" <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
caption="Total" css-class="custom-table-column" />
css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
/> 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>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
:width="150" css-class="custom-table-column" />
alignment="center" <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
data-field="" css-class="custom-table-column" />
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> </DxColumn>
</DxDataGrid> </DxDataGrid>

16
src/components/Pages/Keluhan/Table_34.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true"> :word-wrap-enabled="true">
@ -14,18 +14,10 @@
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" /> caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" 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" <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
css-class="custom-table-column" /> :caption="i" 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> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>

36
src/components/Pages/Keluhan/Table_35.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true"> :word-wrap-enabled="true">
@ -14,48 +14,48 @@
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" 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" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Belum Selesai" 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" <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" 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" <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1" <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2" <DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3" <DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4" <DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5" <DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks" <DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>

2
src/components/Pages/MenuProvider.vue
View File

@ -14,12 +14,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useFiltersStore } from '@/stores/filters'
// Dapatkan objek route dari vue-router // Dapatkan objek route dari vue-router
const route = useRoute() const route = useRoute()
// Dapatkan nama rute menggunakan computed property // Dapatkan nama rute menggunakan computed property
const pageTitle = computed(() => route.name) const pageTitle = computed(() => route.name)
const filters = useFiltersStore()
</script> </script>

132
src/components/Pages/Monalisa/Table_36.vue
View File

@ -1,33 +1,35 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="true" /> <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" 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 alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,15 +38,41 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
import { useDateStore } from '@/stores/date'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -53,7 +81,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +92,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -74,7 +102,68 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const MONALISAJUMLAHKALIGANGGUAN = gql`
query DaftarMonalisaJumlahKaliGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaJumlahKaliGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
regional: '',
posko: posko,
idUid: uid,
idUp3: up3,
bulan: 10,
tahun: 2023,
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.monalisaJumlahKaliGangguan;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
@ -82,7 +171,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
onMounted(() => { onMounted(() => {
const filters = useFiltersStore() const filters = useFiltersStore()
filters.setConfig({ filters.setConfig({
type: 'type-2', type: 'type-2',
reportButton: true reportButton: true

138
src/components/Pages/Monalisa/Table_37.vue
View File

@ -1,33 +1,37 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" 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="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,16 +40,37 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -53,7 +78,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +89,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -74,7 +99,74 @@ const onExporting = (e: any) => {
e.cancel = true e.cancel = true
} }
} }
const monalisaDispatchingTimeGangguan = gql`
query DaftarmonalisaDispatchingTimeGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaDispatchingTimeGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeGangguan, {
regional: '',
posko: '',
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
regional: '',
posko: posko,
idUid: uid,
idUp3: up3,
bulan: 10,
tahun: 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)

113
src/components/Pages/Monalisa/Table_38.vue
View File

@ -1,33 +1,37 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" 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="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,7 +40,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -45,6 +49,79 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRecoveryTimeKeluhan = gql`
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
monalisaRecoveryTimeKeluhan(
regional:$regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`;
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
regional: "",
posko: "",
idUid: 0,
idUp3: 0,
bulan: 10,
tahun: 2023,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: "",
posko: posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
data.value = [...data.value, {
...item,
}];
});
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {

136
src/components/Pages/Monalisa/Table_39.vue
View File

@ -1,33 +1,37 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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 :enabled="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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" 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="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,15 +40,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import gql from 'graphql-tag'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaResponseTimeKeluhan = gql`
query DaftarmonalisaResponseTimeKeluhan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaResponseTimeKeluhan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaResponseTimeKeluhan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
@ -53,7 +147,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +158,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

274
src/components/Pages/Monalisa/Table_40.vue
View File

@ -1,69 +1,174 @@
<template> <template>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)]"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :data-source="data"
:word-wrap-enabled="true"> :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" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column"> :width="200"
alignment="center"
data-field="nama_posko"
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="Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" 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="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> <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="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <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="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rct_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column"> <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 alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> <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="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <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="" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rch_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -72,16 +177,111 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaJumlahDurasiRptRctGangguan = gql`
query DaftarmonalisaJumlahDurasiRptRctGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaJumlahDurasiRptRctGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_gangguan_rct_bulan
jumlah_gangguan_rct_sampai_bulan
jumlah_gangguan_rpt_bulan
jumlah_gangguan_rpt_sampai_bulan
nama_posko
rct_gangguan_bulan
rct_gangguan_sampai_bulan
rpt_gangguan_bulan
rpt_gangguan_sampai_bulan
total_rct_bulan
total_rct_sampai_bulan
total_rpt_bulan
total_rpt_sampai_bulan
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -89,7 +289,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -100,7 +300,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

120
src/components/Pages/Monalisa/Table_41.vue
View File

@ -1,37 +1,125 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-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 :enabled="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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" /> <DxColumn :width="50" alignment="center"
<DxColumn alignment="center" data-field="" caption="ID Gangguan" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="" caption="Jenis Gangguan" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" /> <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" css-class="custom-table-column" />
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaGangguanPerJenisGangguan = gql`
query DaftarmonalisaGangguanPerJenisGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaGangguanPerJenisGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
id_gangguan
jumlah
persen_gangguan
tipe_permasalahan
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -39,7 +127,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -50,7 +138,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

132
src/components/Pages/Monalisa/Table_42.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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" />
@ -12,22 +12,23 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" 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 alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,16 +37,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRekapitulasiLaporUlangGangguan = gql`
query DaftarmonalisaRekapitulasiLaporUlangGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaRekapitulasiLaporUlangGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -53,7 +143,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +154,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

132
src/components/Pages/Monalisa/Table_43.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:word-wrap-enabled="true"> :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" />
@ -12,22 +12,23 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="ENS Gangguan" 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 alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
css-class="custom-table-column" /> caption="Des 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
css-class="custom-table-column" /> caption="Des 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
css-class="custom-table-column" /> caption="s.d Jan 2018" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
css-class="custom-table-column" /> caption="Jan 2019" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -36,16 +37,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRekapitulasiEnsGangguan = gql`
query DaftarmonalisaRekapitulasiEnsGangguan(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaRekapitulasiEnsGangguan(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -53,7 +143,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -64,7 +154,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

101
src/components/Pages/Monalisa/Table_44.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :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"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@ -25,16 +25,105 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaGangguanBelumSelesai = gql`
query DaftarmonalisaGangguanBelumSelesai(
$regional: String
$posko: String
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaGangguanBelumSelesai(
regional: $regional
posko: $posko
idUid: $idUid
idUp3: $idUp3
bulan: $bulan
tahun: $tahun
) {
jumlah_bulan
jumlah_bulan_n_1
jumlah_tahun
jumlah_tahun_n_1
nama_posko
persen_bulan
persen_tahun
}
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
bulan: 10,
tahun: 2023,
regional: '',
posko: posko,
idUid: uid,
idUp3: up3
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
@ -42,7 +131,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -53,7 +142,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')

16
src/components/Pages/Monalisa/Table_45.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" 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 alignment="center" caption="MoM" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2018" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

16
src/components/Pages/Monalisa/Table_46.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" 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="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

16
src/components/Pages/Monalisa/Table_47.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" 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="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

4
src/components/Pages/Monalisa/Table_48.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,7 +12,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Januari 2021" 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 alignment="center" caption="Total RPT" css-class="custom-table-column">

2
src/components/Pages/Monalisa/Table_49.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :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"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">

16
src/components/Pages/Monalisa/Table_50.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@ -12,22 +12,22 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="MoM" 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" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Des 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> <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" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2019" <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>

2
src/components/Pages/Monalisa/Table_51.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :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"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">

2
src/components/Pages/Monalisa/Table_52.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_53.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_54.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_55.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_56.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_57.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_58.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

2
src/components/Pages/Monalisa/Table_59.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <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" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"

4
src/components/Select.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
interface DataItem { interface DataItem {
id: number id: any
name: string name: any
} }
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from 'vue'

4
src/components/SelectMulti.vue
View File

@ -53,7 +53,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple=""> <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
<div class="relative mt-1"> <div class="relative mt-1">
<div <div
@ -66,7 +66,7 @@ onMounted(() => {
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" /> <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton> </ComboboxButton>
</div> </div>
<span class="block flex flex-wrap gap-2"> <span class="flex flex-wrap gap-2">
<span v-if="selected.length == 0" class="p-0.5">Empty</span> <span v-if="selected.length == 0" class="p-0.5">Empty</span>
<span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"> <span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>