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-09 09:37:51 +07:00
commit 62cbcc9c28
65 changed files with 4692 additions and 8537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7581
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -15,7 +15,8 @@
"prepare": "tw-patch install"
},
"dependencies": {
"@apollo/client": "^3.8.8",
"@apollo/client": "^3.8.10",
"@apollo/link-context": "^2.0.0-beta.3",
"@headlessui/tailwindcss": "^0.2.0",
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
@ -23,7 +24,10 @@
"@phosphor-icons/vue": "^2.1.6",
"@types/qs": "^6.9.9",
"@types/uuid": "^9.0.2",
"@vue/apollo-option": "^4.0.0-beta.12",
"@vue/apollo-components": "^4.0.0",
"@vue/apollo-composable": "^4.0.1",
"@vue/apollo-option": "^4.0.0",
"axios": "^1.6.7",
"devextreme": "23.1.5",
"devextreme-vue": "23.1.5",
"dotenv": "^16.3.1",
@ -35,6 +39,8 @@
"jspdf": "^2.5.1",
"pinia": "^2.1.3",
"qs": "^6.11.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"uuid": "^9.0.0",
"vue": "^3.3.4",
"vue-router": "^4.2.2",

31
src/components/DatePicker.vue
View File

@ -1,34 +1,27 @@
<script setup lang="ts">
import { useDateStore } from '@/stores/date';
import { PhCalendarBlank } from '@phosphor-icons/vue';
import { ref } from 'vue'
import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref('')
const formatter = ref({
date: 'DD MMM YYYY',
month: 'MMM'
date: 'DD-MM-YYYY',
month: 'MMMM'
})
watch(dateValue, (newValue) => {
useDateStore().setDateValue(newValue);
})
</script>
<template>
<div class="flex">
<vue-tailwind-datepicker
v-model="dateValue"
:formatter="formatter"
separator=" s/d "
:shortcuts="false"
:auto-apply="false"
as-single
use-range
v-slot="{ value, placeholder }"
>
<vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
:auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
<div class="flex">
<div class="flex-1">
<button
type="button"
class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
>
<button type="button"
class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
<span class="text-gray-900">
{{ value || placeholder }}
</span>

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

@ -1,14 +1,14 @@
<script setup lang="ts">
// components
import Button from '@/components/Button.vue';
import { useSearchStore } from '@/stores/filtersAction';
// icons
import {
PhArrowsCounterClockwise,
PhFileText,
PhMagnifyingGlass
} from '@phosphor-icons/vue';
const cariButton = useSearchStore()
defineProps({
reportButton: {
type: Boolean,
@ -26,7 +26,7 @@
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
<div class="filter-buttons flex gap-3 flex-wrap">
<Button label="Ulangi" style-type="outline" class-name="bg-white">
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
<PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
</Button>
@ -34,7 +34,7 @@
<PhFileText size="18" class="ml-1" weight="regular" />
</Button>
<Button label="Cari Data">
<Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
<PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
</Button>
</div>

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

@ -1,32 +1,58 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Posko';
const uppp = ref({ id: 0, name: uppPlaceholder });
const uid = ref({ id: 0, name:uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: uppPlaceholder };
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Posko(value);
posko.value = { id: 0, name: poskoPlaceholder };
};
const setPosko = (value: any) => {
posko.value = value;
selectedPosko(value);
};
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="setUid($event)" :data="items"
:placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
:placeholder="uppPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select placeholder="Semua Posko" />
<Select @update:selected="setPosko($event)"
:data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker />
</div>
</template>

47
src/components/Form/FiltersType/Type18.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
fetchData();
const departments = [
{ id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
{ id: 2, name: 'HR', contact: 'Kenton Towne' },
{ id: 3, name: 'Sales', contact: 'Therese Wunsch' },
{ id: 4, name: 'Finance', contact: 'Benedict Kessler' },
{ id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
]
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUppp($event)" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
<SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker />
</div>
</template>

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

@ -1,42 +1,71 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const regionalPlaceholder = 'Semua Regional';
const uppp = ref({ id: 0, name: up3Placholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const regional = ref({ id: 0, name: regionalPlaceholder });
const setRegional = (value: any) => {
regional.value = value;
selectedUid(value);
uid.value = { id: 0, name: uidPlaceholder };
};
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placholder };
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUp3Ulp(value);
};
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
<Select placeholder="Semua Regional"/>
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Layanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select placeholder="Semua Unit Layanan Pelanggan" />
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
<div class="grid grid-cols-2 gap-x-2">
<Select placeholder="Juli" />
<Select placeholder="2023" />
<Select :data="months" placeholder="Pilih Bulan" />
<Select :data="years" placeholder="Pilih Tahun" />
</div>
</div>
</template>

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

@ -1,29 +1,51 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
};
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Layanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select placeholder="Semua Unit Layanan Pelanggan" />
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

@ -1,13 +1,23 @@
<script setup lang="ts">
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
const changeMinReport = (value: any) => {
useTotalReport().setDataMin(value)
}
const changeMaxReport = (value: any) => {
useTotalReport().setDataMax(value)
}
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -15,13 +25,13 @@
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select placeholder="Semua Posko" />
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -34,9 +44,9 @@
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<Select placeholder="1" />
<InputNumber :value="1" @change="changeMinReport($event.target.value)" />
<small class="flex items-center">s/d</small>
<Select placeholder="2" />
<InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
</div>
</div>
</template>

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

@ -2,6 +2,39 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue';
import { useTotalDuration } from '@/stores/totalDuration';
import { ref } from 'vue';
const data = [
{
id : 1,
name : 'Dibawah / Sesuai SLA (<= 45 menit)'
},
{
id : 2,
name : 'Melebihi SLA (> 45 menit)'
}
]
const triggerInput = ref(false)
const changeDuration = (value: any) => {
if(value.id === 0 ){
console.log('Durasi Menit')
useTotalDuration().setDataMin(0)
useTotalDuration().setDataMax(5)
triggerInput.value = false
}else if(value.id === 1){
useTotalDuration().setDataMin(0)
useTotalDuration().setDataMax(45)
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
}else{
useTotalDuration().setDataMin(46)
useTotalDuration().setDataMax(7*60*24)
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
}
</script>
<template>
@ -35,12 +68,12 @@
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
<div class="flex flex-col gap-y-1">
<Select placeholder="Durasi Menit" />
<Select @update:selected="changeDuration($event)" :data="data" placeholder="Durasi Menit" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputWithSuffix />
<InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
<small class="flex items-center">s/d</small>
<InputWithSuffix />
<InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
</div>
</div>
</div>

1
src/components/Form/FiltersType/index.ts
View File

@ -15,3 +15,4 @@ export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue'
export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'

121
src/components/Form/FiltersType/reference.ts Normal file
View File

@ -0,0 +1,121 @@
import { getUid, getUp3, getPosko ,getUlp} from '@/utils/network';
import { ref } from 'vue'
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
import { useRegionStore } from '@/stores/region';
import { useUlpStore } from '@/stores/ulp';
interface Item {
id: number;
name: any;
}
const months =[
{id:1, name: 'Januari'},
{id:2, name: 'Februari'},
{id:3, name: 'Maret'},
{id:4, name: 'April'},
{id:5, name: 'Mei'},
{id:6, name: 'Juni'},
{id:7, name: 'Juli'},
{id:8, name: 'Agustus'},
{id:9, name: 'September'},
{id:10, name: 'Oktober'},
{id:11, name: 'November'},
{id:12, name: 'Desember'},
]
// create 4 year back array
const year = new Date().getFullYear();
const years =ref<Item[]>([]);
for (let i = 0; i < 5; i++) {
years.value.push({id:year-i, name: year-i})
}
const timeout = ref()
const items = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
const itemsUlp = ref<Item[]>([]);
const itemsRegional = ref<Item[]>([]);
const itemsMedia = ref<Item[]>([]);
// Fetch data from the API using Axios
const fetchData = async () => {
try {
const res = await getUid()
items.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchDataUp3 = async (uid: number) => {
try {
const res = await getUp3(uid)
itemsUp3.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchDataUlp = async (up3: number) => {
try {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}
const fetchDataPosko = async (up3: number) => {
clearTimeout(timeout.value)
timeout.value = setTimeout(async () => {
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
},300);
};
const selectedUid = (value: any) => {
useRegionStore().setData(value.id);
fetchDataUp3(value.id);
}
const selectedUp3Posko = (value: any) => {
useUp3Store().setData(value.id);
fetchDataPosko(value.id);
}
const selectedUp3Ulp = (value: any) => {
useUp3Store().setData(value.id);
fetchDataUlp(value.id);
}
const selectedPosko = (value: any) => {
usePostsStore().setData(value.id);
}
const selectedUlp = (value: any) => {
useUlpStore().setData(value.id);
}
export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};

39
src/components/Form/InputNumber.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup lang="ts">
const props = defineProps({
placeholder: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
value: {
type: Number,
default: "",
},
})
</script>
<template>
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
autocomplete="off"
type="number"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
</div>
</template>

7
src/components/Form/InputWithSuffix.vue
View File

@ -11,7 +11,11 @@
readonly: {
type: Boolean,
default: false,
}
},
value: {
type: Number,
default: "",
},
})
</script>
@ -20,6 +24,7 @@
<input
autocomplete="off"
type="text"
:value ="props.value"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"

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

@ -1,20 +1,23 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" data-type="number"
caption="No" />
<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" />
@ -28,17 +31,17 @@
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_awal"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
caption="Posko Awal" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
caption="Posko Tujuan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="id_pelanggan"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="data" />
@ -48,7 +51,7 @@
caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_laporan"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
cell-template="data" />
@ -194,29 +197,39 @@
</template>
<script setup lang="ts">
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import type { Data1 } from '@/types/gangguan'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { writeDataJson } from '@/utils/storage'
import { useDialogStore } from '@/stores/dialog'
import { useFiltersStore } from '@/stores/filters'
import { useDateStore } from '@/stores/date'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { useSearchStore } from '@/stores/filtersAction';
import { usePostsStore } from '@/stores/posts';
import { useUp3Store } from '@/stores/up3';
import { useRegionStore } from '@/stores/region';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const dialog = useDialogStore()
const data = ref<Data1[]>([])
const dataDetail = ref<Data1>()
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const closeDetail = () => {
showDetail.value = false
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -246,33 +259,72 @@ const onExporting = (e: any) => {
}
}
const createDummy = () => {
for (let i = 0; i < 100; i++) {
data.value.push({
number: i + 1,
no_laporan: 'G5223091' + (900002 + i),
pembuat_laporan: 'agentjateng',
tanggal_laporan: '19/09/2023 12:26:42',
tanggal_dialihkan: '19/09/2023 12:33:46',
tanggal_respon: '19/09/2023 13:14:15',
tanggal_recovery: '19/09/2023 13:14:15',
durasi_respon: '0-0:47:32',
durasi_recovery: '0-0:49:35',
posko_awal: 'POSKO ULP UNGARAN.',
posko_tujuan: 'POSKO ULP UNGARAN.',
status: 'Selesai',
id_pelanggan: '-',
nama_pelapor: 'Moegy',
alamat_pelapor: '-',
no_telp_pelapor: '085136661313',
keterangan_pelapor: '-',
sumber_laporan: 'Contact Center',
posko: 'POSKO ULP UNGGARAN'
const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
daftarGangguanDialihkanKePoskoLain(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko_asal
posko_tujuan
status_akhir
waktu_recovery
waktu_response
}
}
`;
const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko: posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
data.value = [...data.value, {
...item,
pembuat_laporan: '-'
}];
});
}
writeDataJson('data-daftar-1', data.value)
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
@ -282,14 +334,10 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const showData = () => {
showDetail.value = true
}
onMounted(() => {
const filters = useFiltersStore()
createDummy()
filters.setConfig({
type: 'type-1',
});
})
})
</script>

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

@ -1,20 +1,26 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
<template>
<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"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sub Kelompok (Equipment)"
<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 :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)"
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"
@ -73,7 +79,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -82,7 +88,50 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import gql from 'graphql-tag';
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'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
query daftarGangguanRecoveryTime(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanRecoveryTime(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const loadingVisible = ref<boolean>(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -111,6 +160,44 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value, {
...item,
kode: 'Kode'
}];
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(queryError => {
console.log(queryError)
})
})
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]

121
src/components/Pages/Gangguan/Table_11.vue
View File

@ -1,5 +1,6 @@
<!-- Rekapitulasi Gangguan Per Posko -->
<template>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@ -156,6 +157,54 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import gql from 'graphql-tag';
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 GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
query rekapitulasiGangguanPerPosko(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanPerPosko(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -263,15 +312,81 @@ const createDummy = () => {
data.value = dummy;
}
const data = ref<any[]>([])
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
var i = 1;
queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
const entry = {
no : Number(i++),
posko: item.posko,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai,
},
belumSelesai: {
jml: item.total_inproses,
persen:item.persen_inproses,
},
},
responseTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response,
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response,
},
},
recoveryTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery,
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery,
},
}
};
data.value = [...data.value, entry];
})
data.value = [...data.value];
console.log(data.value)
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-8',
reportButton: true
})
createDummy()
// createDummy()
})
</script>

119
src/components/Pages/Gangguan/Table_12.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -12,58 +12,61 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
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" />
</DxColumn>
<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="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" 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_durasi_response" data-type="number" 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" 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" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" 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="total_dibawah_sla_response" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" 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_durasi_recovery" data-type="number" 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" 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" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" 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="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -72,7 +75,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted ,ref} from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -81,7 +84,54 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
query rekapitulasiGangguanPerRegu(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanPerRegu(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
nama_regu
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -115,10 +165,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerRegu;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-9'
})

117
src/components/Pages/Gangguan/Table_13.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -12,58 +12,61 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
<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 :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
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" />
</DxColumn>
<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="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" 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_durasi_response" data-type="number" 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" 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" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" 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="total_dibawah_sla_response" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" 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_durasi_recovery" data-type="number" 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" 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" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" 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="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -72,7 +75,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -81,7 +84,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -116,9 +124,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
query rekapitulasiGangguanPerTanggal(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanPerTanggal(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-9'
})

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -12,19 +12,15 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<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 :width="150" alignment="center" data-field="" data-type="date" caption="1"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
css-class="custom-table-column" />
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -32,7 +28,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -41,7 +37,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -76,9 +77,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
query rekapitulasiGangguanBerdasarkanMedia(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanBerdasarkanMedia(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
media
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

73
src/components/Pages/Gangguan/Table_15.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<div id="data">
<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"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -11,18 +11,21 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" css-class="custom-table-column" />
<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 alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -31,7 +34,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -65,10 +73,55 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanAlihPosko
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanAlihPosko
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
id_uid
id_up3
posko
posko_in
posko_out
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

128
src/components/Pages/Gangguan/Table_16.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<div id="data">
<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"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -12,33 +12,35 @@
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
<DxColumn :width="50" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="a" css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" caption="b" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" caption="c" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d=(e+g)" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="f=(e/d)*100" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="g" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="h=(g/d)*100" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -48,20 +50,20 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="i" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="j=(i/d)*100"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="k" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="l" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -69,20 +71,20 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="m" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" caption="m" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="n=(m/d)*100"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="o" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="p" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -92,20 +94,20 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="q" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="r=(q/d)*100"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking" caption="r=(q/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="s" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="s" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="t" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -113,20 +115,20 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="u" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="v=(u/d)*100"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking" caption="v=(u/d)*100"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="w" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="x" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -138,7 +140,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -147,7 +149,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -181,10 +188,73 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
query rekapitulasiGangguanDiselesaikanMobileAPKT
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanDiselesaikanMobileAPKT
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_waktu_recovery_mobile_marking
avg_waktu_recovery_mobile_nonmarking
avg_waktu_recovery_nonmobile_marking
avg_waktu_recovery_nonmobile_nonmarking
avg_waktu_response_mobile_marking
avg_waktu_response_mobile_nonmarking
avg_waktu_response_nonmobile_marking
avg_waktu_response_nonmobile_nonmarking
kode_regu
persen_belum_selesai
persen_laporan_mobile_marking
persen_laporan_mobile_nonmarking
persen_laporan_nonmobile_marking
persen_laporan_nonmobile_nonmarking
persen_selesai
regu
total_belum_selesai
total_laporan
total_laporan_mobile_marking
total_laporan_mobile_nonmarking
total_laporan_nonmobile_marking
total_laporan_nonmobile_nonmarking
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

83
src/components/Pages/Gangguan/Table_17.vue
View File

@ -1,8 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -11,7 +12,9 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" data-type="number"
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="NO" data-type="number"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
@ -72,9 +75,12 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import type { Rekap1 } from '@/types/gangguan'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
const data = ref<Rekap1[]>([])
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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -139,10 +145,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
query rekapitulasiGangguanRatingPerPosko
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanRatingPerPosko
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
createDummy()
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',

94
src/components/Pages/Gangguan/Table_18.vue
View File

@ -1,8 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -11,7 +12,8 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" data-type="number"
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
@ -56,22 +58,35 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -79,7 +94,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -90,7 +105,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -101,15 +116,70 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanRatingPerRegu(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanRatingPerRegu(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

97
src/components/Pages/Gangguan/Table_19.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
@ -11,31 +11,31 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -43,7 +43,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -52,7 +52,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -88,11 +93,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
query rekapitulasiGangguanKoreksiTransaksiIndividual
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanKoreksiTransaksiIndividual
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
agustus
april
desember
februari
januari
juli
juni
maret
mei
november
oktober
september
uid
ulp
up3
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
type: 'type-18',
reportButton: true
})
})

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

@ -1,5 +1,5 @@
<template>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
@ -8,12 +8,19 @@
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane" :shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="no" data-type="number"
caption="No" cell-template="data" />
<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 css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
@ -22,15 +29,15 @@
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_no_meter"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="data" />
@ -40,7 +47,7 @@
caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="sumber_lapor"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
cell-template="data" />
@ -115,7 +122,7 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER:
</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_no_meter" class-name="flex-1" />
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -158,13 +165,25 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
import InputText from '@/components/InputText.vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
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 { useTotalReport } from '@/stores/totalReport';
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)
@ -180,46 +199,77 @@ const showData = () => {
const closeDetail = () => {
showDetail.value = false
}
const data = [
{
no: 1,
no_laporan: 'G5223091900003',
tgl_lapor: '31/01/2023 15:33:19',
tgl_response: '31/01/2023 16:56:25',
tgl_recovery: '31/01/2023 17:08:28',
jml_lapor: 1,
durasi_response_time: '0-01:23:06',
durasi_recovery_time: '0-01:35:08',
status: 'Selesai',
idpel_no_meter: '523013252126 / 1731807',
nama_pelapor: 'IBU FELISIA',
alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
no_telp_pelapor: '082229870235',
keterangan_pelapor: '-',
sumber_lapor: '-',
posko: 'POSKO ULP SEMARANG',
},
{
no: 2,
no_laporan: 'G5223091900673',
tgl_lapor: '31/01/2023 12:35:37',
tgl_response: '31/01/2023 13:39:01',
tgl_recovery: '31/01/2023 14:10:53',
jml_lapor: 1,
durasi_response_time: '0-01:03:24',
durasi_recovery_time: '0-01:35:16',
status: 'Selesai',
idpel_no_meter: '523013252126 / 1731807',
nama_pelapor: 'BP TUPANDIYO',
alamat_pelapor: 'JL TAMBAKA RT-4 / RW-12 NO.24 GG ABU',
no_telp_pelapor: '0248660457',
keterangan_pelapor: '-',
sumber_lapor: '-',
posko: 'POSKO ULP SEMARANG',
const loadingVisible = ref(true)
const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI =gql`
query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
daftarGangguanMelaporLebihDariSatuKali(
minJmlLapor: $minJmlLapor
maxJmlLapor: $maxJmlLapor
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_response_time
id_gangguan
idpel_nometer
jumlah_lapor
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
]
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
minJmlLapor: 1,
maxJmlLapor: 1,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
const minJmlLapor = useTotalReport().getDataMin()
const maxJmlLapor = useTotalReport().getDataMax()
refetch({
minJmlLapor,
maxJmlLapor,
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3
})
onResult(queryResult => {
if(queryResult.data != undefined){
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()

114
src/components/Pages/Gangguan/Table_20.vue
View File

@ -1,8 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -11,31 +12,31 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Januari"
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Februari"
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Maret"
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="April"
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Mei"
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juni"
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Juli"
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Agustus"
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="September"
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Oktober"
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="November"
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" data-type="number" caption="Desember"
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -43,16 +44,30 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { 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 onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -60,7 +75,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -71,7 +86,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -82,15 +97,68 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanCleansingTransaksiTM(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanCleansingTransaksiTM(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
agustus
april
desember
februari
januari
juli
juni
maret
mei
november
oktober
september
uid
ulp
up3
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

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

@ -1,56 +1,155 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<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=""
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" />
<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="tgl_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<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="referensi_marking"
caption="Referensi Marking" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
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 { useTotalDuration } from '@/stores/totalDuration';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
query daftarGangguanResponseTime(
$dateFrom: Date!
$dateTo: Date!
$minDurasiResponseTime: Int!
$maxDurasiResponseTime: Int!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarGangguanResponseTime(
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiResponseTime: $minDurasiResponseTime
maxDurasiResponseTime: $maxDurasiResponseTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiResponseTime: 1, //menit
maxDurasiResponseTime: 1,// menit
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanResponseTime;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
const minDurasiResponseTime = useTotalDuration().getDataMin();
const maxDurasiResponseTime = useTotalDuration().getDataMax();
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
minDurasiResponseTime,
maxDurasiResponseTime,
posko,
idUid: uid,
idUp3: up3
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-7',
})

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

@ -1,5 +1,5 @@
<template>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@ -7,52 +7,142 @@
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" />
<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="tgl_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<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="referensi_marking"
caption="Referensi Marking" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import { useDateStore } from '@/stores/date';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useTotalDuration } from '@/stores/totalDuration';
import { useUp3Store } from '@/stores/up3';
import { useSearchStore } from '@/stores/filtersAction';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
query daftarGangguanRecoveryTime(
$dateFrom: Date!
$dateTo: Date!
$minDurasiRecoveryTime: Int!
$maxDurasiRecoveryTime: Int!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarGangguanRecoveryTime(
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiRecoveryTime: $minDurasiRecoveryTime
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: 1, //menit
maxDurasiRecoveryTime: 1,// menit
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
const minDurasiRecoveryTime = useTotalDuration().getDataMin();
const maxDurasiRecoveryTime = useTotalDuration().getDataMax();
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
minDurasiRecoveryTime,
maxDurasiRecoveryTime,
posko,
idUid: uid,
idUp3: up3
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanRecoveryTime;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-7',
})

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

@ -1,56 +1,135 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<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=""
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" />
<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="tgl_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<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="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
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';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
query daftarGangguanSelesaiTanpaIdPelanggan(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarGangguanSelesaiTanpaIdPelanggan(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
})

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

@ -1,51 +1,130 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<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=""
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true"/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<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="tgl_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Media" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
caption="Keterangan Media" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_media" caption="Tgl Media" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
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 { useMediaStore } from '@/stores/media';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
query daftarGangguanBerdasarkanMedia(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
$media : String!
) {
daftarGangguanBerdasarkanMedia(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
media: $media
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
media : "Twitter"
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
const media = useMediaStore().getData() ? useMediaStore().getData() : "Twitter"
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3,
media
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()

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

@ -1,53 +1,133 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<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=""
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" />
<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="tgl_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<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="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable';
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';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
query daftarGangguanDiselesaikanMobileAPKT(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarGangguanDiselesaikanMobileAPKT(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()

205
src/components/Pages/Gangguan/Table_8.vue
View File

@ -1,63 +1,66 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false"
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
<DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Response Time" 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" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" 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" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
@ -67,16 +70,104 @@
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import type { Rekap1 } from '@/types/gangguan'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
const data = ref<Rekap1[]>([])
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable'
import { useSearchStore } from '@/stores/filtersAction'
import { useDateStore } from '@/stores/date'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'
import { useUp3Store } from '@/stores/up3'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALL = gql`
query rekapitulasiAllGangguan(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiAllGangguan(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value, {
...item,
nama_unit: 'UNIT'
}];
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
})
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -106,35 +197,6 @@ const onExporting = (e: any) => {
}
}
const createDummy = () => {
for (let i = 0; i < 100; i++) {
data.value.push({
id: i,
nama_unit: '-',
total: 0,
selesai: '-',
in_progress: 0,
avg: 0,
max: 0,
min: 0,
dt_avg: 0,
dt_max: 0,
dt_min: 0,
dt_more_sla: 0,
dt_less_sla: 0,
rt_avg: 0,
rt_max: 0,
rt_min: 0,
rt_more_sla: 0,
rt_less_sla: 0,
ret_avg: 0,
ret_max: 0,
ret_min: 0,
ret_more_sla: 0,
ret_less_sla: 0,
});
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
@ -142,10 +204,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
}
onMounted(() => {
createDummy()
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
reportButton: true

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

@ -1,5 +1,6 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
<template>
<div>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@ -7,7 +8,8 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
@ -114,7 +116,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
@ -123,7 +125,59 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import gql from 'graphql-tag';
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'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const dataReal = ref<any[]>([])
const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
query daftarGangguanRecoveryTime(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanRecoveryTime(
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiRecoveryTime: $minDurasiRecoveryTime
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_gangguan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -880,10 +934,40 @@ const data = [
}
},
]
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
refetch({
dateFrom: dateValue[0].split('-').reverse().join('-'),
dateTo: dateValue[1].split('-').reverse().join('-'),
posko,
idUid: uid,
idUp3: up3,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
dataReal.value = [...dataReal.value, {
...item,
nama_unit: 'UNIT'
}];
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(queryError => {
console.log(queryError)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-1',
reportButton: true

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@ -13,49 +13,62 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
<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 :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"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
<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_dialihkan" caption="Tgl Dialihkan"
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" />
<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" />
<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" />
<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" />
<DxColumn :width="170" alignment="center" data-field="" caption="Unit Asal" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
<DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
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" />
<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" />
<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" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -64,7 +77,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -75,7 +88,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -91,9 +104,66 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
query daftarKeluhanDipindahkanKePoskoLain(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanDipindahkanKePoskoLain(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
id_uid
id_up3
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko_asal
posko_tujuan
status_akhir
waktu_dialihkan
waktu_recovery
waktu_response
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3'
})

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@ -13,52 +13,63 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Pembuat Laporan"
<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 :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"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Dialihkan"
<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_dialihkan" caption="Tgl Dialihkan"
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" />
<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" />
<DxColumn :width="120" alignment="center" data-field="" caption="Jml Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi Response Time"
<DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
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" />
<DxColumn :width="120" alignment="center" data-field="" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Pelapor"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
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" />
<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" />
<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" />
<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" />
<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>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -67,7 +78,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -78,7 +89,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -94,9 +105,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanMelaporLebihDariSatuKali(
$minJmlLapor: Int!
$maxJmlLapor: Int!
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanMelaporLebihDariSatuKali(
dateFrom: $dateFrom
dateTo: $dateTo
minJmlLapor: $minJmlLapor
maxJmlLapor: $maxJmlLapor
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-10'
})

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@ -13,7 +13,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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" />
@ -40,22 +43,32 @@
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -64,7 +77,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -75,7 +88,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -91,9 +104,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanResponseTime(
$dateFrom: Date!
$dateTo: Date!
$minDurasiResponseTime: Int!
$maxDurasiResponseTime: Int!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanResponseTime(
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiResponseTime: $minDurasiResponseTime
maxDurasiResponseTime: $maxDurasiResponseTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiResponseTime: 0,
maxDurasiResponseTime: 0,
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanResponseTime
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-11'
})

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
@ -13,7 +13,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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" />
@ -41,22 +44,32 @@
<DxColumn :width="170" alignment="center" data-field="" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama ULP" css-class="custom-table-column" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -65,7 +78,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -76,7 +89,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -92,9 +105,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanRecoveryTime(
$dateFrom: Date!
$dateTo: Date!
$minDurasiRecoveryTime: Int!
$maxDurasiRecoveryTime: Int!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanRecoveryTime(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
minDurasiRecoveryTime: $minDurasiRecoveryTime
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanRecoveryTime
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-11'
})

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

@ -13,7 +13,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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" />
@ -50,7 +53,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -59,6 +62,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -94,9 +99,66 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanSelesaiTanpaIdPelanggan
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanSelesaiTanpaIdPelanggan
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3'
})

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

@ -13,7 +13,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="Nama Pelapor"
css-class="custom-table-column" />
@ -45,15 +48,27 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -62,7 +77,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -73,7 +88,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -89,9 +104,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanBerdasarkanMedia(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
$media: String!
) {
daftarKeluhanBerdasarkanMedia(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
media: $media
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir
waktu_recovery
waktu_response
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3'
})

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

@ -13,7 +13,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
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="Contact Center"
css-class="custom-table-column" />
@ -46,15 +49,27 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -63,7 +78,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -74,7 +89,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -90,9 +105,65 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanDiselesaikanCC123
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanDiselesaikanCC123
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan!
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
posko
status_akhir!
waktu_recovery
waktu_response
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0,
media: 'Twitter'
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3'
})

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

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -12,7 +12,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
@ -24,15 +24,15 @@
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
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" />
<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" />
<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" />
<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" />
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
@ -47,21 +47,31 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -70,7 +80,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -81,7 +91,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -97,9 +107,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanAll
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanAll
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanAll
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3',
reportButton: true

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

@ -1,6 +1,6 @@
<template>
<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"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -12,7 +12,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -67,21 +70,31 @@
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -90,7 +103,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -101,7 +114,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -117,9 +130,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerFungsiBidang
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerFungsiBidang
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-13',
reportButton: true

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

@ -1,6 +1,6 @@
<template>
<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"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -12,8 +12,11 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Jenis Keluhan"
<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 :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
@ -73,7 +76,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -82,6 +85,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -117,9 +122,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerJenisKeluhan
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerJenisKeluhan
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3'
})

74
src/components/Pages/Keluhan/Table_31.vue
View File

@ -1,6 +1,6 @@
<template>
<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"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -12,7 +12,10 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -73,7 +76,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -82,6 +85,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -117,9 +122,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerKelompokKeluhan
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerKelompokKeluhan
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-13',
reportButton: true

294
src/components/Pages/Keluhan/Table_32.vue
View File

@ -1,87 +1,225 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:data-source="data"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal"
caption="Tanggal Lapor"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -90,7 +228,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -101,7 +239,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -117,9 +255,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerTanggal(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerTanggal(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-13',
reportButton: true

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

@ -1,86 +1,224 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
<DxColumn
:width="50"
alignment="center"
: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 :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -89,7 +227,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -100,7 +238,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -116,9 +254,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanPerUnit(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanPerUnit(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-8',
reportButton: true

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

@ -12,7 +12,8 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
@ -26,21 +27,31 @@
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
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 { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -49,7 +60,7 @@ const onExporting = (e: any) => {
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
@ -60,7 +71,7 @@ const onExporting = (e: any) => {
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -76,9 +87,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanBerdasarkanMedia(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanBerdasarkanMedia(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
media
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
}
}
`
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-3'
})

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

@ -12,7 +12,8 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
: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="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@ -63,7 +64,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -72,6 +73,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -107,9 +110,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanRatingPerUnit
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiKeluhanRatingPerUnit
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-8',
reportButton: true

116
src/components/Select.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts">
interface DataItem {
id: number;
value: string;
name: string;
}
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'
import {
Combobox,
ComboboxInput,
@ -18,27 +18,44 @@
const props = defineProps({
placeholder: {
type: String,
default: ''
default: '0'
},
data: {
type: Array as () => DataItem[],
default: []
},
selected: {
type: Object as () => DataItem,
default: () => ({ id: 0, name: '' })
}
})
const emit = defineEmits(["update:selected"])
const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
computed(() => {
if (props.selected.id === 0) {
selected.value = { id:0, name: props.placeholder }
}
console.log('selected', selected.value.name);
})
watch(() => props.selected, (value) => {
if (value.id === 0) {
selected.value = { id:0, name: props.placeholder }
}
})
const data: DataItem[] = [
{id: 0, value: props.placeholder},
...props.data
]
let selected = ref(data[0])
let selected = ref<DataItem>(data.value[0])
let query = ref('')
let filteredData = computed(() =>
query.value === ''
? data
: data.filter((item: DataItem) =>
item.value
? data.value
: data.value.filter((item: DataItem) =>
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
@ -46,69 +63,48 @@
)
const show = ref(false)
</script>
<template>
<Combobox v-model="selected" v-slot="{ open }">
<Combobox
@update:modelValue="value => emit('update:selected', value)"
v-model="selected" v-slot="{ open }">
<div class="relative mt-1">
<div
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
>
<ComboboxInput
class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(item: any) => (show || open ? '' : item.value)"
@change="query = $event.target.value"
@click="show = true"
@blur="show = false"
defaultValue="sasa"
/>
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
<ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
@click="show = true" @blur="show = false" defaultValue="" />
<ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
</div>
<TransitionRoot
:show="show || open"
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@after-leave="query = ''"
>
<ComboboxOptions
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
>
<div
v-if="filteredData.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700"
>
<TransitionRoot :show="show || open"
leave="transition ease-in duration-100" leaveFrom="opacity-100"
leaveTo="opacity-0" @after-leave="query = ''">
<ComboboxOptions static
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<div v-if="filteredData.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700">
Nothing found.
</div>
<ComboboxOption
v-for="item in filteredData"
as="template"
:key="item.id"
:value="item"
v-slot="{ selected, active }"
>
<li
class="relative cursor-default select-none py-2 pl-10 pr-4"
:class="{
<ComboboxOption v-for="item in filteredData"
as="template" :key="item.id" :value="item"
v-slot="{ selected, active }">
<li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
'bg-teal-600 text-white': active,
'text-gray-900': !active
}"
>
<span
class="block truncate"
:class="{ 'font-medium': selected, 'font-normal': !selected }"
>
{{ item.value }}
}">
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ item.name }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-teal-600': !active }"
>
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-teal-600': !active }">
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>

107
src/components/SelectMulti.vue Normal file
View File

@ -0,0 +1,107 @@
<script setup lang="ts">
interface DataItem {
id: number;
name: string;
}
import { ref, computed, onMounted } from 'vue'
import {
Combobox,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot
} from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
const props = defineProps({
placeholder: {
type: String,
default: ''
},
data: {
type: Array as () => DataItem[],
default: []
}
})
const emit = defineEmits(["update:selected"])
const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
let selected = ref<DataItem[]>([data.value[0]])
let query = ref('')
let filteredData = computed(() =>
query.value === ''
? data.value
: data.value.filter((item: DataItem) =>
item.name
.toLowerCase()
.replace(/\s+/g, '')
.includes(query.value.toLowerCase().replace(/\s+/g, ''))
)
)
const show = ref(false)
const removeJenis = (item: DataItem) => {
selected.value = selected.value.filter((i) => i.id !== item.id)
}
onMounted(() => {
})
</script>
<template>
<Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple="">
<div class="relative mt-1">
<div
class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
<ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
:displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
@click="show = true" @blur="show = false" defaultValue="" />
<ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</ComboboxButton>
</div>
<span class="block flex flex-wrap gap-2">
<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>{{ item.name }}</span>
<svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</span>
</span>
<TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
leaveTo="opacity-0" @after-leave="query = ''">
<ComboboxOptions static
class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<div v-if="filteredData.length === 0 && query !== ''"
class="relative cursor-default select-none py-2 px-4 text-gray-700">
Nothing found.
</div>
<ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
v-slot="{ selected, active }">
<li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
'bg-teal-600 text-white': active,
'text-gray-900': !active
}">
<span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
{{ item.name }}
</span>
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
:class="{ 'text-white': active, 'text-teal-600': !active }">
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ComboboxOption>
</ComboboxOptions>
</TransitionRoot>
</div>
</Combobox>
</template>

18
src/main.ts
View File

@ -1,20 +1,20 @@
// import 'devextreme/dist/css/dx.material.blue.light.compact.css'
import '@lottiefiles/lottie-player'
import '@/assets/css/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createApolloProvider } from '@vue/apollo-option'
import { apolloClient } from './utils/graphql'
import App from './App.vue'
import router from './router'
import { createApp, provide, h } from 'vue'
import { DefaultApolloClient } from '@vue/apollo-composable'
import { apolloClient } from './utils/graphql'
const app = createApp(App)
const apolloProvider = createApolloProvider({
defaultClient: apolloClient,
});
const app = createApp({
setup() {
provide(DefaultApolloClient, apolloClient())
},
render: () => h(App),
})
app.use(createPinia())
app.use(apolloProvider)
app.use(router)
app.mount('#app')

16
src/stores/date.ts Normal file
View File

@ -0,0 +1,16 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useDateStore = defineStore('date', () => {
const dateValue = ref('')
const setDateValue = (value: string) => {
dateValue.value = value
}
const getDateValue = () => {
return dateValue.value;
}
return {
setDateValue,
getDateValue,
}
})

4
src/stores/filters.ts
View File

@ -19,6 +19,7 @@ import {
Type15,
Type16,
Type17,
Type18
} from '@/components/Form/FiltersType'
const test1: { [key: string]: any } = {
@ -38,7 +39,8 @@ const test1: { [key: string]: any } = {
'type-14': Type14,
'type-15': Type15,
'type-16': Type16,
'type-17': Type17
'type-17': Type17,
'type-18': Type18
}
const getFilters = (type: string): VueElement => {

9
src/stores/filtersAction.ts Normal file
View File

@ -0,0 +1,9 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useSearchStore = defineStore('dateTest', () => {
return {
isTriggerChange: ref(false),
}
})

16
src/stores/media.ts Normal file
View File

@ -0,0 +1,16 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useMediaStore = defineStore('media', () => {
const media = ref('')
const setData = (value: string) => {
media.value = value
}
const getData = () => {
return media.value
}
return {
setData,
getData,
}
})

16
src/stores/posts.ts Normal file
View File

@ -0,0 +1,16 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const usePostsStore = defineStore('posts', () => {
const posts = ref('')
const setData = (value: string) => {
posts.value = value
}
const getData = () => {
return posts.value
}
return {
setData,
getData,
}
})

2
src/stores/queries.ts
View File

@ -1,7 +1,7 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import gql from 'graphql-tag'
import { useQuery } from '@apollo/client'
import { useQuery } from '@vue/apollo-composable'
export const useQueryStore = defineStore('query', () => {
const getUser = useQuery(gql`

16
src/stores/region.ts Normal file
View File

@ -0,0 +1,16 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useRegionStore = defineStore('region', () => {
const region = ref()
const setData = (value: Number) => {
region.value = value
}
const getData = () => {
return region.value
}
return {
setData,
getData,
}
})

25
src/stores/totalDuration.ts Normal file
View File

@ -0,0 +1,25 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useTotalDuration = defineStore('totalDuration', () => {
const totalMin = ref(1)
const totalMax = ref(1)
const setDataMin = (value: any) => {
totalMin.value = value
}
const getDataMin = () => {
return totalMin.value
}
const setDataMax = (value: any) => {
totalMax.value = value
}
const getDataMax = () => {
return totalMax.value
}
return {
setDataMin,
getDataMin,
setDataMax,
getDataMax,
}
})

25
src/stores/totalReport.ts Normal file
View File

@ -0,0 +1,25 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useTotalReport = defineStore('totalReport', () => {
const totalMin = ref(1)
const totalMax = ref(1)
const setDataMin = (value: any) => {
totalMin.value = value
}
const getDataMin = () => {
return totalMin.value
}
const setDataMax = (value: any) => {
totalMax.value = value
}
const getDataMax = () => {
return totalMax.value
}
return {
setDataMin,
getDataMin,
setDataMax,
getDataMax,
}
})

16
src/stores/ulp.ts Normal file
View File

@ -0,0 +1,16 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useUlpStore = defineStore('ulp', () => {
const ulp = ref()
const setData = (value: number) => {
ulp.value = value
}
const getData = () => {
return ulp.value
}
return {
setData,
getData,
}
})

16
src/stores/up3.ts Normal file
View File

@ -0,0 +1,16 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useUp3Store = defineStore('up3', () => {
const up3 = ref()
const setData = (value: number) => {
up3.value = value
}
const getData = () => {
return up3.value
}
return {
setData,
getData,
}
})

28
src/utils/graphql.ts
View File

@ -1,16 +1,24 @@
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
// HTTP connection to the API
export const apolloClient = () => {
const httpLink = createHttpLink({
// You should use an absolute URL here
uri: 'http://localhost:3020/graphql',
})
uri: 'http://10.8.0.13:8080/graphql',
credentials: 'include', // Include credentials for cross-origin requests
});
// Cache implementation
const cache = new InMemoryCache()
// Create the apollo client
export const apolloClient = new ApolloClient({
const apolloClient = new ApolloClient({
cache: new InMemoryCache(),
link: httpLink,
cache,
})
headers: {
Accept: 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
'Content-Type': 'application/json',
// Add other headers as needed
},
});
return apolloClient;
}

16
src/utils/network.ts Normal file
View File

@ -0,0 +1,16 @@
import axios from "axios";
const instance = axios.create({
baseURL: 'http://localhost:8443'
});
const getUid = async () => await instance.get('/uid');
const getMedia = async() => await instance.get('/media');
const getJenisTransaksi = async() => await instance.get('/jenisTransaksi');
const getUp3 = async (
uid: number,
) => await instance.get('/up3?uid=' + uid);
const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3);
const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp);
export { getUid, getUp3, getPosko,getUlp,getMedia,getJenisTransaksi };