fix: check all gangguan menu
This commit is contained in:
kur0nek-o
@ -1404,6 +1404,10 @@ body {
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
@ -5511,6 +5515,10 @@ body {
|
|||||||
max-width: 20rem;
|
max-width: 20rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sm\:max-w-\[90\%\] {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
.sm\:flex-1 {
|
.sm\:flex-1 {
|
||||||
flex: 1 1 0%;
|
flex: 1 1 0%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -3,13 +3,7 @@ import Select from '@/components/Select.vue'
|
|||||||
import DatePicker from '@/components/DatePicker.vue'
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
|
|
||||||
import { onMounted, ref, watch } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import {
|
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
|
||||||
selectedUid,
|
|
||||||
selectedUp3Posko,
|
|
||||||
fetchUid,
|
|
||||||
itemsUid,
|
|
||||||
itemsUp3,
|
|
||||||
} from './reference'
|
|
||||||
|
|
||||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||||
@ -38,8 +32,6 @@ const setUid = (value: any) => {
|
|||||||
|
|
||||||
const setUp3 = (value: any) => {
|
const setUp3 = (value: any) => {
|
||||||
uppp.value = value
|
uppp.value = value
|
||||||
selectedUp3Posko(value)
|
|
||||||
posko.value = { id: 0, name: poskoPlaceholder }
|
|
||||||
data.value.up3 = value
|
data.value.up3 = value
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,26 +39,26 @@ onMounted(() => {
|
|||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
fetchUid()
|
fetchUid()
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||||
|
>Unit Induk Distribusi/Wilayah:</label
|
||||||
|
>
|
||||||
|
|
||||||
<Select
|
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||||
@update:selected="setUid($event)"
|
|
||||||
:data="itemsUid"
|
|
||||||
:placeholder="uidPlaceholder"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<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
|
<Select
|
||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
|
:selected="uppp"
|
||||||
:placeholder="uppPlaceholder"
|
:placeholder="uppPlaceholder"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -74,9 +66,6 @@ onMounted(() => {
|
|||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||||
|
|
||||||
<DatePicker @update:date-value="(value) => {
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
data.periode = value
|
|
||||||
}
|
|
||||||
" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Select from '@/components/Select.vue'
|
import Select from '@/components/Select.vue'
|
||||||
import DatePicker from '@/components/DatePicker.vue'
|
import DatePicker from '@/components/DatePicker.vue'
|
||||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||||
|
|
||||||
import { onMounted, ref, watch } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import {
|
import {
|
||||||
@ -19,13 +19,14 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
|||||||
const poskoPlaceholder = 'Semua Posko'
|
const poskoPlaceholder = 'Semua Posko'
|
||||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||||
const posko = ref({ id: 0 ,name: poskoPlaceholder })
|
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||||
const emit = defineEmits(['update:filters'])
|
const emit = defineEmits(['update:filters'])
|
||||||
const data = ref({
|
const data = ref({
|
||||||
uid: uid.value,
|
uid: uid.value,
|
||||||
up3: uppp.value,
|
up3: uppp.value,
|
||||||
posko: posko.value,
|
posko: posko.value,
|
||||||
periode: ''
|
periode: '',
|
||||||
|
groupBy: false
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(data.value, (value) => {
|
watch(data.value, (value) => {
|
||||||
@ -53,20 +54,18 @@ const setPosko = (value: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('update:filters', data.value)
|
|
||||||
fetchUid()
|
fetchUid()
|
||||||
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||||
|
>Unit Induk Distribusi/Wilayah:</label
|
||||||
|
>
|
||||||
|
|
||||||
<Select
|
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||||
@update:selected="setUid($event)"
|
|
||||||
:data="itemsUid"
|
|
||||||
:placeholder="uidPlaceholder"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
@ -78,31 +77,38 @@ onMounted(() => {
|
|||||||
@update:selected="setUp3($event)"
|
@update:selected="setUp3($event)"
|
||||||
:data="itemsUp3"
|
:data="itemsUp3"
|
||||||
:placeholder="uppPlaceholder"
|
:placeholder="uppPlaceholder"
|
||||||
|
:selected="uppp"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||||
|
|
||||||
<Select
|
<Select
|
||||||
@update:selected="setPosko($event)"
|
@update:selected="setPosko($event)"
|
||||||
:data="itemsPosko"
|
:data="itemsPosko"
|
||||||
:placeholder="poskoPlaceholder"
|
:placeholder="poskoPlaceholder"
|
||||||
|
:selected="posko"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||||
|
|
||||||
<DatePicker @update:date-value="(value) => {
|
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||||
data.periode = value
|
|
||||||
}
|
|
||||||
" />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
|
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||||
|
>Group By Kode Unit Distribusi:</label
|
||||||
|
>
|
||||||
|
|
||||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
|
<InlineRadioGroup
|
||||||
|
@update:group-value="(value) => (data.groupBy = value.id === 2)"
|
||||||
|
:radio-items="[
|
||||||
|
{ id: 1, title: 'Tidak', checked: true },
|
||||||
|
{ id: 2, title: 'Ya, Grupkan' }
|
||||||
|
]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -3,13 +3,19 @@
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
|
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
|
||||||
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
||||||
<input v-model="groupValue"
|
<input
|
||||||
type="radio" name="radio"
|
v-model="groupValue"
|
||||||
|
type="radio"
|
||||||
|
name="radio"
|
||||||
:checked="itemSelected.id === item.id ? true : false"
|
:checked="itemSelected.id === item.id ? true : false"
|
||||||
@change="onChange(item)"
|
@change="onChange(item)"
|
||||||
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
|
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
|
||||||
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
|
/>
|
||||||
item.title }}</label>
|
<label
|
||||||
|
:for="`${item.id}`"
|
||||||
|
class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500"
|
||||||
|
>{{ item.title }}</label
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@ -17,16 +23,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch, type PropType, onMounted } from 'vue'
|
import { ref, type PropType, onMounted } from 'vue'
|
||||||
|
|
||||||
interface Item {
|
interface Item {
|
||||||
id: number;
|
id: number
|
||||||
title: string;
|
title: string
|
||||||
checked?: boolean;
|
checked?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const onChange= (e:Item) => {
|
const onChange = (e: Item) => {
|
||||||
itemSelected.value = e
|
itemSelected.value = e
|
||||||
|
console.log(e)
|
||||||
emit('update:groupValue', e)
|
emit('update:groupValue', e)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,5 +51,4 @@ const groupValue = ref(1)
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
itemSelected.value = props.radioItems[0]
|
itemSelected.value = props.radioItems[0]
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,101 +1,245 @@
|
|||||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => {
|
@reset-form="data = []"
|
||||||
filters = value
|
:report-button="true"
|
||||||
}
|
@run-search="() => filterData(filters)"
|
||||||
" />
|
class="mb-4"
|
||||||
</Filters>
|
>
|
||||||
<div id="data">
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
</Filters>
|
||||||
: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 :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" />
|
|
||||||
<DxColumnFixing :enabled="true" />
|
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<div id="data">
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
<DxDataGrid
|
||||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
|
class="max-h-[calc(100vh-140px)]"
|
||||||
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
|
:data-source="data"
|
||||||
css-class="custom-table-column" />
|
:show-column-lines="true"
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
:show-row-lines="false"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
:show-borders="true"
|
||||||
css-class="custom-table-column" />
|
:row-alternation-enabled="true"
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
:hover-state-enabled="true"
|
||||||
<DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
|
@selection-changed="onSelectionChanged"
|
||||||
css-class="custom-table-column" />
|
:column-width="100"
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
@exporting="onExporting"
|
||||||
css-class="custom-table-column" />
|
:allow-column-resizing="true"
|
||||||
</DxColumn>
|
column-resizing-mode="widget"
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
:word-wrap-enabled="true"
|
||||||
<DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
|
>
|
||||||
css-class="custom-table-column" />
|
<DxSelection mode="single" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
|
<DxPaging :enabled="false" />
|
||||||
css-class="custom-table-column" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
</DxColumn>
|
<DxLoadPanel
|
||||||
</DxColumn>
|
:position="position"
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
:show-indicator="showIndicator"
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
:show-pane="showPane"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
|
:shading="shading"
|
||||||
caption="Total" css-class="custom-table-column" />
|
v-if="loading"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
|
v-model:visible="loading"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
:enabled="true"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
|
/>
|
||||||
caption="Max" css-class="custom-table-column" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
|
<DxExport
|
||||||
caption="Min" css-class="custom-table-column" />
|
:enabled="true"
|
||||||
</DxColumn>
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
:allow-export-selected-data="false"
|
||||||
<DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
|
/>
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
<DxColumnFixing :enabled="true" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
|
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
<DxColumn
|
||||||
</DxColumn>
|
css-class="custom-table-column"
|
||||||
</DxColumn>
|
:width="50"
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
alignment="center"
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
data-type="number"
|
||||||
caption="Total" css-class="custom-table-column" />
|
caption="No"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
|
/>
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
:width="120"
|
||||||
caption="Max" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
data-field="kode"
|
||||||
caption="Min" css-class="custom-table-column" />
|
caption="Kode"
|
||||||
</DxColumn>
|
css-class="custom-table-column"
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
|
<DxColumn
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
:width="150"
|
||||||
<DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
|
alignment="center"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
data-field="sub_kelompok"
|
||||||
</DxColumn>
|
caption="Sub Kelompok (Equipment)"
|
||||||
</DxColumn>
|
css-class="custom-table-column"
|
||||||
</DxDataGrid>
|
/>
|
||||||
</div>
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
|
<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="selesai"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="in_process"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="persen_in_process"
|
||||||
|
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="total_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_response_time"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="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="di_atas_sla_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="dibawah_sla_durasi_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="total_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="avg_waktu_recovery_time"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="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="diatas_sla_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="dibawah_sla_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxColumn>
|
||||||
|
</DxColumn>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
@ -146,69 +290,74 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5
|
indent: 5
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
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: 0,
|
|
||||||
idUid: 0,
|
|
||||||
idUp3: 0
|
|
||||||
})
|
|
||||||
const filterData = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
const { posko, uid, up3 } = params
|
|
||||||
refetch({
|
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
|
||||||
posko: posko ? posko.id : 0,
|
|
||||||
idUid: uid ? uid.id : 0,
|
|
||||||
idUp3: up3 ? up3.id : 0
|
|
||||||
})
|
|
||||||
onResult((queryResult) => {
|
|
||||||
if (queryResult.data != undefined) {
|
|
||||||
|
|
||||||
data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
|
||||||
console.log(queryResult.loading)
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
console.log(queryResult.networkStatus)
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
}
|
posko: 0,
|
||||||
})
|
idUid: 0,
|
||||||
onError((queryError) => {
|
idUp3: 0
|
||||||
console.log(queryError)
|
})
|
||||||
})
|
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0]
|
||||||
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : 0,
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
data.value = queryResult.data.rekapitulasiJenisGangguanSE004
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
onError((queryError) => {
|
||||||
|
console.log(queryError)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,324 +1,626 @@
|
|||||||
<!-- Rekapitulasi Gangguan Per Posko -->
|
<!-- Rekapitulasi Gangguan Per Posko -->
|
||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type8 @update:filters="(value) => {
|
:report-button="true"
|
||||||
filters = value
|
@reset-form="data = []"
|
||||||
}
|
@run-search="() => filterData(filters)"
|
||||||
" />
|
class="mb-4"
|
||||||
</Filters>
|
>
|
||||||
<div id="data">
|
<Type8 @update:filters="(value) => (filters = value)" />
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
</Filters>
|
||||||
: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 :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" />
|
|
||||||
<DxColumnFixing :enabled="true" />
|
|
||||||
|
|
||||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
|
|
||||||
css-class="custom-table-column" :group-index="0" />
|
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
|
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.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="laporan.sudahSelesai.jml" data-type="number"
|
|
||||||
caption="Jml" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" 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="laporan.belumSelesai.jml" data-type="number"
|
|
||||||
caption="Jml" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" 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="responseTime.menit.total" data-type="number"
|
|
||||||
caption="Total" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
|
|
||||||
caption="Max" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" 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="responseTime.laporan.lebihSla" data-type="number"
|
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" 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="recoveryTime.menit.total" data-type="number"
|
|
||||||
caption="Total" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
|
|
||||||
caption="Max" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" 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="recoveryTime.laporan.lebihSla" data-type="number"
|
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
|
||||||
</DxColumn>
|
|
||||||
</DxColumn>
|
|
||||||
|
|
||||||
<DxSummary>
|
<div id="data">
|
||||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
|
<DxDataGrid
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
|
class="max-h-[calc(100vh-140px)]"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
:data-source="data"
|
||||||
display-format="{0}" />
|
:show-column-lines="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
|
:show-row-lines="false"
|
||||||
display-format="{0}" />
|
:show-borders="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
:row-alternation-enabled="true"
|
||||||
display-format="{0}" />
|
:hover-state-enabled="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
|
@selection-changed="onSelectionChanged"
|
||||||
display-format="{0}" />
|
:column-width="100"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
@exporting="onExporting"
|
||||||
display-format="{0}" />
|
:allow-column-resizing="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
|
column-resizing-mode="widget"
|
||||||
display-format="{0}" />
|
:word-wrap-enabled="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
|
>
|
||||||
display-format="{0}" />
|
<DxSelection mode="single" />
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
|
<DxPaging :enabled="false" />
|
||||||
display-format="{0}" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
|
<DxLoadPanel
|
||||||
display-format="{0}" />
|
:position="position"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
:show-indicator="showIndicator"
|
||||||
display-format="{0}" />
|
:show-pane="showPane"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
:shading="shading"
|
||||||
display-format="{0}" />
|
v-if="loading"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
|
v-model:visible="loading"
|
||||||
display-format="{0}" />
|
:enabled="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
|
/>
|
||||||
display-format="{0}" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
|
<DxExport
|
||||||
display-format="{0}" />
|
:enabled="true"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
display-format="{0}" />
|
:allow-export-selected-data="false"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
|
/>
|
||||||
display-format="{0}" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
|
<DxColumn
|
||||||
<DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
|
:width="60"
|
||||||
css-class="text-white" />
|
alignment="center"
|
||||||
<DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
|
data-field="no"
|
||||||
css-class="text-white" />
|
caption="NO"
|
||||||
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
|
css-class="custom-table-column"
|
||||||
css-class="text-white" />
|
/>
|
||||||
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
|
<DxColumn
|
||||||
css-class="text-white" />
|
:width="150"
|
||||||
<DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
|
name="poskoGroup"
|
||||||
css-class="text-white" />
|
alignment="center"
|
||||||
<DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}"
|
data-field="nama_posko"
|
||||||
css-class="text-white" />
|
caption="Posko"
|
||||||
<DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
|
css-class="custom-table-column"
|
||||||
css-class="text-white" />
|
:group-index="0"
|
||||||
<DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}"
|
/>
|
||||||
css-class="text-white" />
|
<DxColumn
|
||||||
<DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}"
|
:width="150"
|
||||||
css-class="text-white" />
|
alignment="center"
|
||||||
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
|
data-field="nama_posko"
|
||||||
css-class="text-white" />
|
caption="Posko"
|
||||||
<DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
|
css-class="custom-table-column"
|
||||||
css-class="text-white" />
|
/>
|
||||||
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
css-class="text-white" />
|
<DxColumn
|
||||||
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
|
:width="120"
|
||||||
css-class="text-white" />
|
alignment="center"
|
||||||
<DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
|
data-field="laporan.total"
|
||||||
css-class="text-white" />
|
data-type="number"
|
||||||
<DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
|
caption="Total"
|
||||||
css-class="text-white" />
|
css-class="custom-table-column"
|
||||||
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
|
/>
|
||||||
css-class="text-white" />
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
|
<DxColumn
|
||||||
css-class="text-white" />
|
:width="120"
|
||||||
</DxSummary>
|
alignment="center"
|
||||||
|
data-field="laporan.sudahSelesai.jml"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.sudahSelesai.persen"
|
||||||
|
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="laporan.belumSelesai.jml"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.belumSelesai.persen"
|
||||||
|
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="responseTime.menit.total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.rataRata"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.max"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.min"
|
||||||
|
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="responseTime.laporan.lebihSla"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.laporan.kurangSla"
|
||||||
|
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="recoveryTime.menit.total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.rataRata"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.max"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.min"
|
||||||
|
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="recoveryTime.laporan.lebihSla"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.laporan.kurangSla"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxColumn>
|
||||||
|
</DxColumn>
|
||||||
|
|
||||||
</DxDataGrid>
|
<DxSummary>
|
||||||
</div>
|
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.sudahSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.sudahSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.belumSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.belumSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DxTotalItem
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="Total"
|
||||||
|
show-in-column="no"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
show-in-column="laporan.total"
|
||||||
|
column="laporan.total"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.sudahSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.sudahSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.belumSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.belumSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
</DxSummary>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type8 from '@/components/Form/FiltersType/Type8.vue'
|
import Type8 from '@/components/Form/FiltersType/Type8.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
|
import {
|
||||||
|
DxColumn,
|
||||||
|
DxColumnFixing,
|
||||||
|
DxExport,
|
||||||
|
DxGroupItem,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPaging,
|
||||||
|
DxScrolling,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection,
|
||||||
|
DxSummary,
|
||||||
|
DxTotalItem
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import gql from 'graphql-tag';
|
import gql from 'graphql-tag'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
const position = { of: '#data' };
|
|
||||||
const showIndicator = ref(true);
|
const position = { of: '#data' }
|
||||||
const shading = ref(true);
|
const showIndicator = ref(true)
|
||||||
const showPane = ref(true);
|
const shading = ref(true)
|
||||||
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
|
const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
|
||||||
query rekapitulasiGangguanPerPosko(
|
query rekapitulasiGangguanPerPosko(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanPerPosko(
|
rekapitulasiGangguanPerPosko(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_recovery
|
avg_durasi_recovery
|
||||||
avg_durasi_response
|
avg_durasi_response
|
||||||
id_posko
|
id_posko
|
||||||
max_durasi_recovery
|
max_durasi_recovery
|
||||||
max_durasi_response
|
max_durasi_response
|
||||||
min_durasi_recovery
|
min_durasi_recovery
|
||||||
min_durasi_response
|
min_durasi_response
|
||||||
nama_posko
|
nama_posko
|
||||||
persen_inproses
|
persen_inproses
|
||||||
persen_selesai
|
persen_selesai
|
||||||
total
|
total
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
total_diatas_sla_response
|
total_diatas_sla_response
|
||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_dibawah_sla_response
|
total_dibawah_sla_response
|
||||||
total_inproses
|
total_inproses
|
||||||
total_selesai
|
total_selesai
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5,
|
indent: 5
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id : 0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3 ? up3.id : 0,
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
onResult(queryResult => {
|
posko: posko ? posko.id : 0,
|
||||||
if (queryResult.data != undefined) {
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
var i = 1;
|
})
|
||||||
queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
|
onResult((queryResult) => {
|
||||||
const entry = {
|
if (queryResult.data != undefined) {
|
||||||
no: Number(i++),
|
var i = 1
|
||||||
nama_posko: item.nama_posko,
|
queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
|
||||||
laporan: {
|
const entry = {
|
||||||
total: item.total,
|
no: Number(i++),
|
||||||
sudahSelesai: {
|
nama_posko: item.nama_posko,
|
||||||
jml: item.total_selesai,
|
laporan: {
|
||||||
persen: item.persen_selesai,
|
total: item.total,
|
||||||
},
|
sudahSelesai: {
|
||||||
belumSelesai: {
|
jml: item.total_selesai,
|
||||||
jml: item.total_inproses,
|
persen: item.persen_selesai
|
||||||
persen: item.persen_inproses,
|
},
|
||||||
},
|
belumSelesai: {
|
||||||
},
|
jml: item.total_inproses,
|
||||||
responseTime: {
|
persen: item.persen_inproses
|
||||||
menit: {
|
}
|
||||||
total: 0,
|
},
|
||||||
rataRata: item.avg_durasi_response,
|
responseTime: {
|
||||||
max: item.max_durasi_response,
|
menit: {
|
||||||
min: item.min_durasi_response,
|
total: 0,
|
||||||
},
|
rataRata: item.avg_durasi_response,
|
||||||
laporan: {
|
max: item.max_durasi_response,
|
||||||
lebihSla: item.total_diatas_sla_response,
|
min: item.min_durasi_response
|
||||||
kurangSla: item.total_dibawah_sla_response,
|
},
|
||||||
},
|
laporan: {
|
||||||
},
|
lebihSla: item.total_diatas_sla_response,
|
||||||
recoveryTime: {
|
kurangSla: item.total_dibawah_sla_response
|
||||||
menit: {
|
}
|
||||||
total: 0,
|
},
|
||||||
rataRata: item.avg_durasi_recovery,
|
recoveryTime: {
|
||||||
max: item.max_durasi_recovery,
|
menit: {
|
||||||
min: item.min_durasi_recovery,
|
total: 0,
|
||||||
},
|
rataRata: item.avg_durasi_recovery,
|
||||||
laporan: {
|
max: item.max_durasi_recovery,
|
||||||
lebihSla: item.total_diatas_sla_recovery,
|
min: item.min_durasi_recovery
|
||||||
kurangSla: item.total_dibawah_sla_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(queryResult.data)
|
data.value = [...data.value, entry]
|
||||||
console.log(queryResult.loading)
|
})
|
||||||
console.log(queryResult.networkStatus)
|
|
||||||
})
|
|
||||||
onError((error) => {
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
data.value = [...data.value]
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const filters = ref();
|
|
||||||
</script>
|
const filters = ref()
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,203 +1,531 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type9 @update:filters="(value) => {
|
<Type9 @update:filters="(value) => (filters = value)" />
|
||||||
filters = value
|
</Filters>
|
||||||
}
|
|
||||||
" />
|
|
||||||
</Filters>
|
|
||||||
<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" />
|
|
||||||
<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" />
|
<div id="data">
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxDataGrid
|
||||||
<DxColumnFixing :enabled="true" />
|
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
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
<DxExport
|
||||||
<DxColumn :width="120" alignment="center" data-field="id_regu" caption="Kode"
|
:enabled="true"
|
||||||
css-class="custom-table-column" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
|
:allow-export-selected-data="false"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumnFixing :enabled="true" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
|
||||||
css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
:width="60"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
css-class="custom-table-column" />
|
data-field="no"
|
||||||
</DxColumn>
|
data-type="number"
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
caption="No"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
/>
|
||||||
css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
:width="120"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
</DxColumn>
|
data-field="id_regu"
|
||||||
</DxColumn>
|
caption="Kode"
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
css-class="custom-table-column"
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-field="id_regu"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
|
caption="Kode"
|
||||||
caption="Max" css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
|
group-index="0"
|
||||||
caption="Min" css-class="custom-table-column" />
|
v-if="filters.groupBy"
|
||||||
</DxColumn>
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
:width="150"
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
data-field="nama_regu"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
caption="Nama Regu"
|
||||||
</DxColumn>
|
css-class="custom-table-column"
|
||||||
</DxColumn>
|
/>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
|
:width="120"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
data-field="laporan.total"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
data-type="number"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
|
caption="Total"
|
||||||
caption="Max" css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
/>
|
||||||
caption="Min" css-class="custom-table-column" />
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
</DxColumn>
|
<DxColumn
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
data-field="laporan.sudahSelesai.jml"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
data-type="number"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
caption="Jml"
|
||||||
</DxColumn>
|
css-class="custom-table-column"
|
||||||
</DxColumn>
|
/>
|
||||||
</DxDataGrid>
|
<DxColumn
|
||||||
</div>
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.sudahSelesai.persen"
|
||||||
|
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="laporan.belumSelesai.jml"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.belumSelesai.persen"
|
||||||
|
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="responseTime.menit.total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.rataRata"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.max"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.min"
|
||||||
|
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="responseTime.laporan.lebihSla"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.laporan.kurangSla"
|
||||||
|
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="recoveryTime.menit.total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.rataRata"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.max"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.min"
|
||||||
|
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="recoveryTime.laporan.lebihSla"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.laporan.kurangSla"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxColumn>
|
||||||
|
</DxColumn>
|
||||||
|
|
||||||
|
<DxSummary>
|
||||||
|
<DxTotalItem
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="Total"
|
||||||
|
show-in-column="no"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
show-in-column="laporan.total"
|
||||||
|
column="laporan.total"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.sudahSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.sudahSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.belumSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="laporan.belumSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="responseTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
<DxTotalItem
|
||||||
|
column="recoveryTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
css-class="text-white"
|
||||||
|
/>
|
||||||
|
</DxSummary>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type9 from '@/components/Form/FiltersType/Type9.vue'
|
import Type9 from '@/components/Form/FiltersType/Type9.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
|
DxColumn,
|
||||||
|
DxColumnFixing,
|
||||||
|
DxExport,
|
||||||
|
DxGroupItem,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPaging,
|
||||||
|
DxScrolling,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection,
|
||||||
|
DxSummary,
|
||||||
|
DxTotalItem
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag';
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' };
|
|
||||||
const showIndicator = ref(true);
|
const position = { of: '#data' }
|
||||||
const shading = ref(true);
|
const showIndicator = ref(true)
|
||||||
const showPane = ref(true);
|
const shading = ref(true)
|
||||||
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
|
const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
|
||||||
query rekapitulasiGangguanPerRegu(
|
query rekapitulasiGangguanPerRegu(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanPerRegu(
|
rekapitulasiGangguanPerRegu(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
id_regu
|
id_regu
|
||||||
nama_regu
|
nama_regu
|
||||||
avg_durasi_recovery
|
avg_durasi_recovery
|
||||||
avg_durasi_response
|
avg_durasi_response
|
||||||
max_durasi_recovery
|
max_durasi_recovery
|
||||||
max_durasi_response
|
max_durasi_response
|
||||||
min_durasi_recovery
|
min_durasi_recovery
|
||||||
min_durasi_response
|
min_durasi_response
|
||||||
persen_inproses
|
persen_inproses
|
||||||
persen_selesai
|
persen_selesai
|
||||||
nama_posko
|
nama_posko
|
||||||
total
|
total
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
total_diatas_sla_response
|
total_diatas_sla_response
|
||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_dibawah_sla_response
|
total_dibawah_sla_response
|
||||||
total_inproses
|
total_inproses
|
||||||
total_selesai
|
total_selesai
|
||||||
}
|
|
||||||
}`;
|
|
||||||
const onExporting = (e: any) => {
|
|
||||||
if (e.format === 'pdf') {
|
|
||||||
const doc = new jsPDF()
|
|
||||||
|
|
||||||
exportToPdf({
|
|
||||||
jsPDFDocument: doc,
|
|
||||||
component: e.component,
|
|
||||||
indent: 5,
|
|
||||||
}).then(() => {
|
|
||||||
doc.save(`.pdf`)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
const workbook = new Workbook()
|
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
|
||||||
|
|
||||||
exportToExcel({
|
|
||||||
component: e.component,
|
|
||||||
worksheet,
|
|
||||||
autoFilterEnabled: true,
|
|
||||||
}).then(() => {
|
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
e.cancel = true
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
const doc = new jsPDF()
|
||||||
|
|
||||||
|
exportToPdf({
|
||||||
|
jsPDFDocument: doc,
|
||||||
|
component: e.component,
|
||||||
|
indent: 5
|
||||||
|
}).then(() => {
|
||||||
|
doc.save(`.pdf`)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const workbook = new Workbook()
|
||||||
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
|
exportToExcel({
|
||||||
|
component: e.component,
|
||||||
|
worksheet,
|
||||||
|
autoFilterEnabled: true
|
||||||
|
}).then(() => {
|
||||||
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
e.cancel = true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const { onResult, onError, loading, refetch } = 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: 0,
|
|
||||||
idUid: 0,
|
|
||||||
idUp3: 0,
|
|
||||||
})
|
|
||||||
const filterData = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
const { posko, uid, up3 } = params
|
|
||||||
refetch({
|
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
|
||||||
posko: posko ? posko.id : 0,
|
|
||||||
idUid: uid ? uid.id : 0,
|
|
||||||
idUp3: up3 ? up3.id : 0,
|
|
||||||
})
|
|
||||||
onResult(queryResult => {
|
|
||||||
if (queryResult.data != undefined) {
|
|
||||||
data.value = queryResult.data.rekapitulasiGangguanPerRegu;
|
|
||||||
}
|
|
||||||
console.log(queryResult.data)
|
|
||||||
console.log(queryResult.loading)
|
|
||||||
console.log(queryResult.networkStatus)
|
|
||||||
})
|
|
||||||
onError((error) => {
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
const { onResult, onError, loading, refetch } = 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: 0,
|
||||||
|
idUid: 0,
|
||||||
|
idUp3: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const filterData = (params: any) => {
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0]
|
||||||
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : 0,
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3 ? up3.id : 0
|
||||||
|
})
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
var i = 1
|
||||||
|
|
||||||
|
queryResult.data.rekapitulasiGangguanPerRegu.forEach((item: any) => {
|
||||||
|
const entry = {
|
||||||
|
no: Number(i++),
|
||||||
|
id_regu: item.id_regu,
|
||||||
|
nama_regu: item.nama_regu,
|
||||||
|
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(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const filters = ref()
|
|
||||||
</script>
|
const filters = ref({
|
||||||
|
groupBy: false
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,203 +1,349 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type9 @update:filters="(value) => {
|
<Type9 @update:filters="(value) => (filters = value)" />
|
||||||
filters = value
|
</Filters>
|
||||||
}
|
|
||||||
" />
|
|
||||||
</Filters>
|
|
||||||
<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" />
|
|
||||||
<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" />
|
<div id="data">
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxDataGrid
|
||||||
<DxColumnFixing :enabled="true" />
|
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
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
<DxExport
|
||||||
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
|
:enabled="true"
|
||||||
css-class="custom-table-column" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
:allow-export-selected-data="false"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
/>
|
||||||
css-class="custom-table-column" />
|
<DxColumnFixing :enabled="true" />
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
</DxColumn>
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
data-type="number"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
caption="No"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
</DxColumn>
|
alignment="center"
|
||||||
</DxColumn>
|
data-field="tanggal"
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
caption="Tanggal Lapor"
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
|
/>
|
||||||
css-class="custom-table-column" />
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
<DxColumn
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
:width="120"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
|
alignment="center"
|
||||||
caption="Max" css-class="custom-table-column" />
|
data-field="total"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
|
data-type="number"
|
||||||
caption="Min" css-class="custom-table-column" />
|
caption="Total"
|
||||||
</DxColumn>
|
css-class="custom-table-column"
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
/>
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
:width="120"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
alignment="center"
|
||||||
</DxColumn>
|
data-field="total_selesai"
|
||||||
</DxColumn>
|
data-type="number"
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
caption="Jml"
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
|
/>
|
||||||
css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
:width="120"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
data-field="persen_selesai"
|
||||||
caption="Max" css-class="custom-table-column" />
|
data-type="number"
|
||||||
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
caption="%"
|
||||||
caption="Min" css-class="custom-table-column" />
|
css-class="custom-table-column"
|
||||||
</DxColumn>
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
</DxColumn>
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
:width="120"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
alignment="center"
|
||||||
</DxColumn>
|
data-field="total_inproses"
|
||||||
</DxColumn>
|
data-type="number"
|
||||||
</DxDataGrid>
|
caption="Jml"
|
||||||
</div>
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="total_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="max_durasi_response"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="total_diatas_sla_response"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="total_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="max_durasi_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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="total_diatas_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total_dibawah_sla_recovery"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxColumn>
|
||||||
|
</DxColumn>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type9 from '@/components/Form/FiltersType/Type9.vue'
|
import Type9 from '@/components/Form/FiltersType/Type9.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
|
DxColumn,
|
||||||
|
DxColumnFixing,
|
||||||
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPaging,
|
||||||
|
DxScrolling,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag';
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' };
|
|
||||||
const showIndicator = ref(true);
|
const position = { of: '#data' }
|
||||||
const shading = ref(true);
|
const showIndicator = ref(true)
|
||||||
const showPane = ref(true);
|
const shading = ref(true)
|
||||||
|
const showPane = ref(true)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5,
|
indent: 5
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
|
const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
|
||||||
query rekapitulasiGangguanPerTanggal(
|
query rekapitulasiGangguanPerTanggal(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanPerTanggal(
|
rekapitulasiGangguanPerTanggal(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
nama_posko
|
nama_posko
|
||||||
avg_durasi_recovery
|
avg_durasi_recovery
|
||||||
avg_durasi_response
|
avg_durasi_response
|
||||||
max_durasi_recovery
|
max_durasi_recovery
|
||||||
max_durasi_response
|
max_durasi_response
|
||||||
min_durasi_recovery
|
min_durasi_recovery
|
||||||
min_durasi_response
|
min_durasi_response
|
||||||
persen_inproses
|
persen_inproses
|
||||||
persen_selesai
|
persen_selesai
|
||||||
tanggal
|
tanggal
|
||||||
total
|
total
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
total_diatas_sla_response
|
total_diatas_sla_response
|
||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_dibawah_sla_response
|
total_dibawah_sla_response
|
||||||
total_inproses
|
total_inproses
|
||||||
total_selesai
|
total_selesai
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id : 0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3 ? up3.id : 0,
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
onResult(queryResult => {
|
posko: posko ? posko.id : 0,
|
||||||
if (queryResult.data != undefined) {
|
idUid: uid ? uid.id : 0,
|
||||||
data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
})
|
||||||
console.log(queryResult.data)
|
onResult((queryResult) => {
|
||||||
console.log(queryResult.loading)
|
if (queryResult.data != undefined) {
|
||||||
console.log(queryResult.networkStatus)
|
data.value = queryResult.data.rekapitulasiGangguanPerTanggal
|
||||||
})
|
}
|
||||||
onError((error) => {
|
console.log(queryResult.data)
|
||||||
console.log(error)
|
console.log(queryResult.loading)
|
||||||
})
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const filters = ref();
|
|
||||||
</script>
|
const filters = ref()
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,53 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => {
|
@reset-form="data = []"
|
||||||
filters = value
|
:report-button="true"
|
||||||
}
|
@run-search="() => filterData(filters)"
|
||||||
" />
|
class="mb-4"
|
||||||
</Filters>
|
>
|
||||||
<div id="data">
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
</Filters>
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
<div id="data">
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
<DxDataGrid
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
class="max-h-[calc(100vh-140px)]"
|
||||||
<DxSelection mode="single" />
|
:data-source="data"
|
||||||
<DxPaging :enabled="false" />
|
:show-column-lines="true"
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
:show-row-lines="false"
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
|
:show-borders="true"
|
||||||
v-model:visible="loading" :enabled="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
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport
|
||||||
<DxColumnFixing :enabled="true" />
|
:enabled="true"
|
||||||
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
css-class="custom-table-column"
|
||||||
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
|
:width="50"
|
||||||
css-class="custom-table-column" />
|
alignment="center"
|
||||||
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
|
data-type="number"
|
||||||
:caption="i" css-class="custom-table-column" />
|
caption="No"
|
||||||
</DxColumn>
|
/>
|
||||||
<DxColumn :width="170" alignment="center" data-field="total" caption="Total"
|
<DxColumn
|
||||||
css-class="custom-table-column" />
|
:width="170"
|
||||||
</DxDataGrid>
|
alignment="center"
|
||||||
</div>
|
data-field="media"
|
||||||
|
caption="Nama Media"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||||
|
<DxColumn
|
||||||
|
v-for="i in 31"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
:data-field="`tgl${i}`"
|
||||||
|
data-type="number"
|
||||||
|
:caption="i"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxColumn>
|
||||||
|
<DxColumn
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="total"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
@ -56,42 +103,43 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5
|
indent: 5
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
@ -148,36 +196,40 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
|
|||||||
`
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
|
||||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id : 0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3 ? up3.id : 0,
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : 0,
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
onResult((queryResult) => {
|
idUp3: up3 ? up3.id : 0
|
||||||
if (queryResult.data != undefined) {
|
})
|
||||||
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
|
|
||||||
}
|
|
||||||
console.log(queryResult.data)
|
|
||||||
console.log(queryResult.loading)
|
|
||||||
console.log(queryResult.networkStatus)
|
|
||||||
})
|
|
||||||
onError((error) => {
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const filters = ref();
|
|
||||||
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,36 +1,85 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => {
|
@reset-form="data = []"
|
||||||
filters = value
|
:report-button="true"
|
||||||
}
|
@run-search="() => filterData(filters)"
|
||||||
" />
|
class="mb-4"
|
||||||
</Filters>
|
>
|
||||||
<div id="data">
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
</Filters>
|
||||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
|
||||||
<DxSelection mode="single" />
|
|
||||||
<DxPaging :enabled="false" />
|
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
|
||||||
<DxLoadPanel :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" />
|
<div id="data">
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxDataGrid
|
||||||
<DxColumnFixing :enabled="true" />
|
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" />
|
||||||
|
<DxPaging :enabled="false" />
|
||||||
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
|
<DxLoadPanel
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
<DxExport
|
||||||
<DxColumn alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
|
:enabled="true"
|
||||||
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Posko" css-class="custom-table-column" />
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
|
:allow-export-selected-data="false"
|
||||||
css-class="custom-table-column" />
|
/>
|
||||||
<DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
|
<DxColumnFixing :enabled="true" />
|
||||||
css-class="custom-table-column" />
|
|
||||||
|
|
||||||
</DxDataGrid>
|
<DxColumn
|
||||||
</div>
|
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="nama_up3"
|
||||||
|
caption="Nama UP3"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -38,7 +87,16 @@ import Filters from '@/components/Form/Filters.vue'
|
|||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
|
DxColumn,
|
||||||
|
DxColumnFixing,
|
||||||
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPaging,
|
||||||
|
DxScrolling,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
@ -46,104 +104,107 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
const position = { of: '#data' };
|
|
||||||
const showIndicator = ref(true);
|
const position = { of: '#data' }
|
||||||
const shading = ref(true);
|
const showIndicator = ref(true)
|
||||||
const showPane = ref(true);
|
const shading = ref(true)
|
||||||
|
const showPane = ref(true)
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5,
|
indent: 5
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
|
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
|
||||||
query rekapitulasiGangguanAlihPosko
|
query rekapitulasiGangguanAlihPosko(
|
||||||
(
|
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiGangguanAlihPosko
|
rekapitulasiGangguanAlihPosko(
|
||||||
(
|
dateFrom: $dateFrom
|
||||||
dateFrom: $dateFrom
|
dateTo: $dateTo
|
||||||
dateTo: $dateTo
|
posko: $posko
|
||||||
posko: $posko
|
idUid: $idUid
|
||||||
idUid: $idUid
|
idUp3: $idUp3
|
||||||
idUp3: $idUp3
|
|
||||||
) {
|
) {
|
||||||
id_posko
|
id_posko
|
||||||
id_uid
|
id_uid
|
||||||
id_up3
|
id_up3
|
||||||
nama_posko
|
nama_posko
|
||||||
nama_uid
|
nama_uid
|
||||||
nama_up3
|
nama_up3
|
||||||
posko_in
|
posko_in
|
||||||
posko_out
|
posko_out
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
|
||||||
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
|
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id :0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3? up3.id:0,
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : 0,
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
onResult(queryResult => {
|
idUp3: up3 ? up3.id : 0
|
||||||
if (queryResult.data != undefined) {
|
})
|
||||||
data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
|
|
||||||
}
|
|
||||||
console.log(queryResult.data)
|
|
||||||
console.log(queryResult.loading)
|
|
||||||
console.log(queryResult.networkStatus)
|
|
||||||
})
|
|
||||||
onError((error) => {
|
|
||||||
console.log(error)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
onResult((queryResult) => {
|
||||||
|
if (queryResult.data != undefined) {
|
||||||
|
data.value = queryResult.data.rekapitulasiGangguanAlihPosko
|
||||||
|
}
|
||||||
|
console.log(queryResult.data)
|
||||||
|
console.log(queryResult.loading)
|
||||||
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const filters = ref();
|
|
||||||
</script>
|
const filters = ref()
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,128 +1,247 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
filters = value
|
</Filters>
|
||||||
}
|
|
||||||
" />
|
|
||||||
</Filters>
|
|
||||||
<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]" display-mode="full"
|
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
<div id="data">
|
||||||
caption="No Laporan" />
|
<DxDataGrid
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
caption="Tgl Lapor" />
|
:data-source="data"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
:show-column-lines="true"
|
||||||
caption="Tgl Response" />
|
:show-row-lines="false"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
:show-borders="true"
|
||||||
caption="Tgl Recovery" />
|
:row-alternation-enabled="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
:hover-state-enabled="true"
|
||||||
caption="Durasi Response Time" />
|
@selection-changed=""
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:column-width="100"
|
||||||
caption="Durasi Recovery Time" />
|
@exporting=""
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
:allow-column-resizing="true"
|
||||||
caption="Status" />
|
column-resizing-mode="widget"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
>
|
||||||
caption="IDPEL/NO METER" />
|
<DxSelection mode="single" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
caption="Nama Pelapor" />
|
<DxPager
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
:visible="true"
|
||||||
caption="Alamat Pelapor" />
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
display-mode="full"
|
||||||
caption="No Telp Pelapor" />
|
:show-page-size-selector="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
:show-info="true"
|
||||||
caption="Keterangan Pelapor" />
|
:show-navigation-buttons="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
/>
|
||||||
caption="Sumber Lapor" />
|
<DxLoadPanel
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
|
<DxExport
|
||||||
|
:enabled="true"
|
||||||
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
|
||||||
</DxDataGrid>
|
<DxColumn
|
||||||
</div>
|
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="waktu_lapor"
|
||||||
|
caption="Tgl Lapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_response"
|
||||||
|
caption="Tgl Response"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_recovery"
|
||||||
|
caption="Tgl Recovery"
|
||||||
|
/>
|
||||||
|
<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="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
/>
|
||||||
|
<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="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="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Posko"
|
||||||
|
/>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
import gql from 'graphql-tag';
|
DxColumn,
|
||||||
import { useQuery } from '@vue/apollo-composable';
|
DxExport,
|
||||||
const position = { of: '#data' };
|
DxLoadPanel,
|
||||||
const showIndicator = ref(true);
|
DxPager,
|
||||||
const shading = ref(true);
|
DxPaging,
|
||||||
const showPane = ref(true);
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
|
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 data = ref<any[]>([])
|
||||||
const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
|
const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
|
||||||
query daftarGangguanSelesaiTanpaIdPelanggan(
|
query daftarGangguanSelesaiTanpaIdPelanggan(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
daftarGangguanSelesaiTanpaIdPelanggan(
|
daftarGangguanSelesaiTanpaIdPelanggan(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
alamat_pelapor
|
alamat_pelapor
|
||||||
durasi_recovery_time
|
durasi_recovery_time
|
||||||
durasi_response_time
|
durasi_response_time
|
||||||
idpel_nometer
|
idpel_nometer
|
||||||
keterangan_pelapor
|
keterangan_pelapor
|
||||||
media
|
media
|
||||||
nama_pelapor
|
nama_pelapor
|
||||||
no_laporan
|
no_laporan
|
||||||
no_telp_pelapor
|
no_telp_pelapor
|
||||||
nama_posko
|
nama_posko
|
||||||
status_akhir
|
status_akhir
|
||||||
waktu_lapor
|
waktu_lapor
|
||||||
waktu_recovery
|
waktu_recovery
|
||||||
waktu_response
|
waktu_response
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { posko, uid, up3 } = params;
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id : 0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3 ? up3.id : 0
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
onResult(queryResult => {
|
posko: posko ? posko.id : 0,
|
||||||
if (queryResult.data != undefined) {
|
idUid: uid ? uid.id : 0,
|
||||||
data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
})
|
||||||
console.log(queryResult.data)
|
onResult((queryResult) => {
|
||||||
console.log(queryResult.loading)
|
if (queryResult.data != undefined) {
|
||||||
console.log(queryResult.networkStatus)
|
data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
|
||||||
})
|
}
|
||||||
onError(error => {
|
console.log(queryResult.data)
|
||||||
console.log(error)
|
console.log(queryResult.loading)
|
||||||
})
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((error) => {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type16 @update:filters="(value) => (filters = value)" />
|
<Type16 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
class="max-h-[calc(100vh-140px)]"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
@ -128,6 +129,13 @@
|
|||||||
data-field="durasi_recovery_time"
|
data-field="durasi_recovery_time"
|
||||||
caption="Durasi Recovery Time"
|
caption="Durasi Recovery Time"
|
||||||
/>
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
:width="150"
|
:width="150"
|
||||||
@ -157,12 +165,12 @@ import {
|
|||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
@ -204,6 +212,7 @@ const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
@ -212,6 +221,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BER
|
|||||||
idUp3: 0,
|
idUp3: 0,
|
||||||
media: 'Twitter'
|
media: 'Twitter'
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { posko, uid, up3, media } = params
|
const { posko, uid, up3, media } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
@ -239,5 +249,6 @@ const filterData = (params: any) => {
|
|||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,133 +1,252 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => {
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
filters = value
|
</Filters>
|
||||||
}
|
|
||||||
" />
|
|
||||||
</Filters>
|
|
||||||
<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]" display-mode="full"
|
|
||||||
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
|
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
|
||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
<div id="data">
|
||||||
caption="No Laporan" />
|
<DxDataGrid
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
caption="Tgl Lapor" />
|
:data-source="data"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
:show-column-lines="true"
|
||||||
caption="Tgl Response" />
|
:show-row-lines="false"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
:show-borders="true"
|
||||||
caption="Tgl Recovery" />
|
:row-alternation-enabled="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
:hover-state-enabled="true"
|
||||||
caption="Durasi Response Time" />
|
@selection-changed=""
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
:column-width="100"
|
||||||
caption="Durasi Recovery Time" />
|
@exporting=""
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
|
:allow-column-resizing="true"
|
||||||
caption="Status" />
|
column-resizing-mode="widget"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
>
|
||||||
caption="IDPEL/NO METER" />
|
<DxSelection mode="single" />
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
caption="Nama Pelapor" />
|
<DxPager
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
:visible="true"
|
||||||
caption="Alamat Pelapor" />
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
display-mode="full"
|
||||||
caption="No Telp Pelapor" />
|
:show-page-size-selector="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
:show-info="true"
|
||||||
caption="Keterangan Pelapor" />
|
:show-navigation-buttons="true"
|
||||||
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
|
/>
|
||||||
caption="Sumber Lapor" />
|
<DxLoadPanel
|
||||||
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/>
|
||||||
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
|
<DxExport
|
||||||
|
:enabled="true"
|
||||||
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="50"
|
||||||
|
alignment="center"
|
||||||
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
|
data-type="number"
|
||||||
|
caption="No"
|
||||||
|
/>
|
||||||
|
|
||||||
</DxDataGrid>
|
<DxColumn
|
||||||
</div>
|
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="waktu_lapor"
|
||||||
|
caption="Tgl Lapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_response"
|
||||||
|
caption="Tgl Response"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="waktu_recovery"
|
||||||
|
caption="Tgl Recovery"
|
||||||
|
/>
|
||||||
|
<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="durasi_recovery_time"
|
||||||
|
caption="Durasi Recovery Time"
|
||||||
|
/>
|
||||||
|
<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="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="media"
|
||||||
|
caption="Sumber Lapor"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
css-class="custom-table-column"
|
||||||
|
:width="170"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
caption="Posko"
|
||||||
|
/>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
import gql from 'graphql-tag';
|
DxColumn,
|
||||||
import { useQuery } from '@vue/apollo-composable';
|
DxExport,
|
||||||
const position = { of: '#data' };
|
DxLoadPanel,
|
||||||
const showIndicator = ref(true);
|
DxPager,
|
||||||
const shading = ref(true);
|
DxPaging,
|
||||||
const showPane = ref(true);
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
|
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 data = ref<any[]>([])
|
||||||
const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
|
const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
|
||||||
query daftarGangguanDiselesaikanMobileAPKT(
|
query daftarGangguanDiselesaikanMobileAPKT(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
daftarGangguanDiselesaikanMobileAPKT(
|
daftarGangguanDiselesaikanMobileAPKT(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
alamat_pelapor
|
alamat_pelapor
|
||||||
durasi_recovery_time
|
durasi_recovery_time
|
||||||
durasi_response_time
|
durasi_response_time
|
||||||
idpel_nometer
|
idpel_nometer
|
||||||
keterangan_pelapor
|
keterangan_pelapor
|
||||||
media
|
media
|
||||||
nama_pelapor
|
nama_pelapor
|
||||||
no_laporan
|
no_laporan
|
||||||
no_telp_pelapor
|
no_telp_pelapor
|
||||||
nama_posko
|
nama_posko
|
||||||
status_akhir
|
status_akhir
|
||||||
waktu_lapor
|
waktu_lapor
|
||||||
waktu_recovery
|
waktu_recovery
|
||||||
waktu_response
|
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),
|
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: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
|
|
||||||
refetch({
|
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
|
||||||
posko: posko ? posko.id : 0,
|
|
||||||
idUid: uid ? uid.id : 0,
|
|
||||||
idUp3: up3?.id ? up3.id : 0,
|
|
||||||
})
|
|
||||||
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)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
refetch({
|
||||||
|
dateFrom: dateValue[0]
|
||||||
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
dateTo: dateValue[1]
|
||||||
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
|
: new Date().toISOString().slice(0, 10),
|
||||||
|
posko: posko ? posko.id : 0,
|
||||||
|
idUid: uid ? uid.id : 0,
|
||||||
|
idUp3: up3?.id ? up3.id : 0
|
||||||
|
})
|
||||||
|
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)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
|
</script>
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,204 +1,399 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => {
|
:report-button="true"
|
||||||
filters = value
|
@reset-form="data = []"
|
||||||
}
|
@run-search="() => filterData(filters)"
|
||||||
" />
|
class="mb-4"
|
||||||
</Filters>
|
>
|
||||||
<div id="data">
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
</Filters>
|
||||||
: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]" display-mode="full" :show-page-size-selector="true"
|
|
||||||
:show-info="true" :show-navigation-buttons="true" />
|
|
||||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
|
||||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
|
||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
|
||||||
|
|
||||||
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
<div id="data">
|
||||||
css-class="custom-table-column" />
|
<DxDataGrid
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
:data-source="data"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
|
:show-column-lines="true"
|
||||||
css-class="custom-table-column" />
|
:show-row-lines="false"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
:show-borders="true"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
:row-alternation-enabled="true"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
|
:hover-state-enabled="true"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
@selection-changed="onSelectionChanged"
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
:column-width="100"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
@exporting="onExporting"
|
||||||
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
:allow-column-resizing="true"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
|
column-resizing-mode="widget"
|
||||||
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"
|
<DxSelection mode="single" />
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
|
<DxPager
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
:visible="true"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
|
:allowed-page-sizes="[5, 10, 20]"
|
||||||
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
|
display-mode="full"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
|
:show-page-size-selector="true"
|
||||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
|
:show-info="true"
|
||||||
</DxColumn>
|
:show-navigation-buttons="true"
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
/>
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
<DxLoadPanel
|
||||||
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
|
:position="position"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
:show-indicator="showIndicator"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
:show-pane="showPane"
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
:shading="shading"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
v-if="loading"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
v-model:visible="loading"
|
||||||
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
|
:enabled="true"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
/>
|
||||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
</DxColumn>
|
<DxExport
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
:enabled="true"
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
|
:allow-export-selected-data="false"
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
/>
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
<DxColumn
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
css-class="custom-table-column"
|
||||||
:allow-resizing="false" css-class="custom-table-column" />
|
:width="50"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
alignment="center"
|
||||||
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
data-type="number"
|
||||||
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
|
caption="No"
|
||||||
</DxColumn>
|
/>
|
||||||
</DxDataGrid>
|
|
||||||
</div>
|
<DxColumn
|
||||||
|
:width="150"
|
||||||
|
alignment="center"
|
||||||
|
data-field="nama_posko"
|
||||||
|
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="total_selesai"
|
||||||
|
caption="Selesai"
|
||||||
|
:allow-resizing="false"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<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 alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
||||||
|
<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="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="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="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_response"
|
||||||
|
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="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="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>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { useFiltersStore } from '@/stores/filters'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
import {
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
DxColumn,
|
||||||
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
|
DxPager,
|
||||||
|
DxPaging,
|
||||||
|
DxSearchPanel,
|
||||||
|
DxSelection
|
||||||
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import { ref } from 'vue'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
|
import gql from 'graphql-tag'
|
||||||
import gql from 'graphql-tag';
|
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
const position = { of: '#data' };
|
|
||||||
const showIndicator = ref(true);
|
const position = { of: '#data' }
|
||||||
const shading = ref(true);
|
const showIndicator = ref(true)
|
||||||
const showPane = ref(true);
|
const shading = ref(true)
|
||||||
|
const showPane = ref(true)
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_REKAPITULASI_GANGGUAN_ALL = gql`
|
const GET_REKAPITULASI_GANGGUAN_ALL = gql`
|
||||||
query rekapitulasiAllGangguan(
|
query rekapitulasiAllGangguan(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int!
|
||||||
$idUid: Int!
|
$idUid: Int!
|
||||||
$idUp3: Int!
|
$idUp3: Int!
|
||||||
) {
|
) {
|
||||||
rekapitulasiAllGangguan(
|
rekapitulasiAllGangguan(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_dispatch
|
avg_durasi_dispatch
|
||||||
avg_durasi_recovery
|
avg_durasi_recovery
|
||||||
avg_durasi_response
|
avg_durasi_response
|
||||||
max_durasi_dispatch
|
max_durasi_dispatch
|
||||||
max_durasi_recovery
|
max_durasi_recovery
|
||||||
max_durasi_response
|
max_durasi_response
|
||||||
min_durasi_dispatch
|
min_durasi_dispatch
|
||||||
min_durasi_recovery
|
min_durasi_recovery
|
||||||
min_durasi_response
|
min_durasi_response
|
||||||
persen_inproses
|
persen_inproses
|
||||||
persen_selesai
|
persen_selesai
|
||||||
nama_posko
|
nama_posko
|
||||||
total
|
total
|
||||||
total_diatas_sla_dispatch
|
total_diatas_sla_dispatch
|
||||||
total_diatas_sla_recovery
|
total_diatas_sla_recovery
|
||||||
total_diatas_sla_response
|
total_diatas_sla_response
|
||||||
total_dibawah_sla_dispatch
|
total_dibawah_sla_dispatch
|
||||||
total_dibawah_sla_recovery
|
total_dibawah_sla_recovery
|
||||||
total_dibawah_sla_response
|
total_dibawah_sla_response
|
||||||
total_inproses
|
total_inproses
|
||||||
total_selesai
|
total_selesai
|
||||||
}
|
}
|
||||||
}`;
|
}
|
||||||
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
posko: 0,
|
posko: 0,
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0,
|
idUp3: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id : 0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3 ? up3.id : 0,
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
onResult(queryResult => {
|
posko: posko ? posko.id : 0,
|
||||||
if (queryResult.data != undefined) {
|
idUid: uid ? uid.id : 0,
|
||||||
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
|
idUp3: up3 ? up3.id : 0
|
||||||
data.value = [...data.value, {
|
})
|
||||||
...item,
|
onResult((queryResult) => {
|
||||||
}];
|
if (queryResult.data != undefined) {
|
||||||
|
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
|
||||||
})
|
data.value = [
|
||||||
}
|
...data.value,
|
||||||
console.log(queryResult.loading)
|
{
|
||||||
console.log(queryResult.networkStatus)
|
...item
|
||||||
})
|
}
|
||||||
onError((error) => {
|
]
|
||||||
console.log(error)
|
})
|
||||||
})
|
|
||||||
}
|
|
||||||
const onExporting = (e: any) => {
|
|
||||||
if (e.format === 'pdf') {
|
|
||||||
const doc = new jsPDF()
|
|
||||||
|
|
||||||
exportToPdf({
|
|
||||||
jsPDFDocument: doc,
|
|
||||||
component: e.component,
|
|
||||||
indent: 5,
|
|
||||||
}).then(() => {
|
|
||||||
doc.save(`.pdf`)
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
const workbook = new Workbook()
|
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
|
||||||
|
|
||||||
exportToExcel({
|
|
||||||
component: e.component,
|
|
||||||
worksheet,
|
|
||||||
autoFilterEnabled: true,
|
|
||||||
}).then(() => {
|
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
e.cancel = true
|
|
||||||
}
|
}
|
||||||
|
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()
|
||||||
|
|
||||||
|
exportToPdf({
|
||||||
|
jsPDFDocument: doc,
|
||||||
|
component: e.component,
|
||||||
|
indent: 5
|
||||||
|
}).then(() => {
|
||||||
|
doc.save(`.pdf`)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const workbook = new Workbook()
|
||||||
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
|
exportToExcel({
|
||||||
|
component: e.component,
|
||||||
|
worksheet,
|
||||||
|
autoFilterEnabled: true
|
||||||
|
}).then(() => {
|
||||||
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
e.cancel = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,144 +1,363 @@
|
|||||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
||||||
<template>
|
<template>
|
||||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
<Filters
|
||||||
<Type1 @update:filters="(value) => {
|
:report-button="true"
|
||||||
filters = value
|
@reset-form="dataReal = []"
|
||||||
}
|
@run-search="() => filterData(filters)"
|
||||||
" />
|
class="mb-4"
|
||||||
</Filters>
|
>
|
||||||
<div id="data">
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
|
</Filters>
|
||||||
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
|
||||||
:allow-column-resizing="true" column-resizing-mode="widget">
|
|
||||||
<DxSelection mode="single" />
|
|
||||||
<DxPaging :enabled="false" />
|
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
|
||||||
<DxLoadPanel :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" />
|
|
||||||
<DxColumnFixing :enabled="true" />
|
|
||||||
<DxGroupPanel :visible="true" />
|
|
||||||
<DxGrouping :auto-expand-all="true" />
|
|
||||||
|
|
||||||
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
|
<div id="data">
|
||||||
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
|
<DxDataGrid
|
||||||
<DxColumn :width="150" alignment="center" name="jenisGangguanGroup" data-field="jenisGangguan"
|
class="max-h-[calc(100vh-140px)]"
|
||||||
caption="Jenis Gangguan" css-class="custom-table-column" :group-index="0" />
|
:data-source="dataReal"
|
||||||
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
|
:show-column-lines="true"
|
||||||
css-class="custom-table-column" />
|
:show-row-lines="false"
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
:show-borders="true"
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
|
:row-alternation-enabled="true"
|
||||||
css-class="custom-table-column" />
|
:hover-state-enabled="true"
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
@selection-changed="onSelectionChanged"
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
|
:column-width="100"
|
||||||
caption="Jml" css-class="custom-table-column" />
|
@exporting="onExporting"
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
|
:allow-column-resizing="true"
|
||||||
caption="%" css-class="custom-table-column" />
|
column-resizing-mode="widget"
|
||||||
</DxColumn>
|
>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxSelection mode="single" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
|
<DxPaging :enabled="false" />
|
||||||
caption="Jml" css-class="custom-table-column" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
|
<DxLoadPanel
|
||||||
caption="%" css-class="custom-table-column" />
|
:position="position"
|
||||||
</DxColumn>
|
:show-indicator="showIndicator"
|
||||||
</DxColumn>
|
:show-pane="showPane"
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
:shading="shading"
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
v-if="loading"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
|
v-model:visible="loading"
|
||||||
caption="Total" css-class="custom-table-column" />
|
:enabled="true"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
|
/>
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
|
<DxExport
|
||||||
caption="Max" css-class="custom-table-column" />
|
:enabled="true"
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
caption="Min" css-class="custom-table-column" />
|
:allow-export-selected-data="false"
|
||||||
</DxColumn>
|
/>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumnFixing :enabled="true" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
|
<DxGroupPanel :visible="true" />
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
<DxGrouping :auto-expand-all="true" />
|
||||||
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" 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="recoveryTime.menit.total" data-type="number"
|
|
||||||
caption="Total" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
|
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
|
|
||||||
caption="Max" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" 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="recoveryTime.laporan.lebihSla" data-type="number"
|
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
|
||||||
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
|
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
|
||||||
</DxColumn>
|
|
||||||
</DxColumn>
|
|
||||||
|
|
||||||
<DxSummary>
|
<DxColumn
|
||||||
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
|
:width="60"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
|
alignment="center"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
|
data-field="no"
|
||||||
display-format="{0}" />
|
caption="NO"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
|
css-class="custom-table-column"
|
||||||
display-format="{0}" />
|
/>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
|
<DxColumn
|
||||||
display-format="{0}" />
|
:width="120"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
|
alignment="center"
|
||||||
display-format="{0}" />
|
data-field="kode"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
|
caption="Kode"
|
||||||
display-format="{0}" />
|
css-class="custom-table-column"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
|
/>
|
||||||
display-format="{0}" />
|
<DxColumn
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
|
:width="150"
|
||||||
display-format="{0}" />
|
alignment="center"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
|
name="jenisGangguanGroup"
|
||||||
display-format="{0}" />
|
data-field="jenisGangguan"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
|
caption="Jenis Gangguan"
|
||||||
display-format="{0}" />
|
css-class="custom-table-column"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
|
:group-index="0"
|
||||||
display-format="{0}" />
|
/>
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
|
<DxColumn
|
||||||
display-format="{0}" />
|
:width="150"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
|
alignment="center"
|
||||||
display-format="{0}" />
|
data-field="jenisGangguan"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
|
caption="Jenis Gangguan"
|
||||||
display-format="{0}" />
|
css-class="custom-table-column"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
|
/>
|
||||||
display-format="{0}" />
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
|
<DxColumn
|
||||||
display-format="{0}" />
|
:width="120"
|
||||||
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
|
alignment="center"
|
||||||
display-format="{0}" />
|
data-field="laporan.total"
|
||||||
</DxSummary>
|
data-type="number"
|
||||||
</DxDataGrid>
|
caption="Total"
|
||||||
</div>
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.sudahSelesai.jml"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.sudahSelesai.persen"
|
||||||
|
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="laporan.belumSelesai.jml"
|
||||||
|
data-type="number"
|
||||||
|
caption="Jml"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="laporan.belumSelesai.persen"
|
||||||
|
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="responseTime.menit.total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.rataRata"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.max"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.menit.min"
|
||||||
|
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="responseTime.laporan.lebihSla"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="responseTime.laporan.kurangSla"
|
||||||
|
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="recoveryTime.menit.total"
|
||||||
|
data-type="number"
|
||||||
|
caption="Total"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.rataRata"
|
||||||
|
data-type="number"
|
||||||
|
caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.max"
|
||||||
|
data-type="number"
|
||||||
|
caption="Max"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.menit.min"
|
||||||
|
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="recoveryTime.laporan.lebihSla"
|
||||||
|
data-type="number"
|
||||||
|
caption=">SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
<DxColumn
|
||||||
|
:width="120"
|
||||||
|
alignment="center"
|
||||||
|
data-field="recoveryTime.laporan.kurangSla"
|
||||||
|
data-type="number"
|
||||||
|
caption="≤SLA"
|
||||||
|
css-class="custom-table-column"
|
||||||
|
/>
|
||||||
|
</DxColumn>
|
||||||
|
</DxColumn>
|
||||||
|
|
||||||
|
<DxSummary>
|
||||||
|
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.sudahSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.sudahSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.belumSelesai.jml"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="laporan.belumSelesai.persen"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="responseTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.total"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.rataRata"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.max"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.menit.min"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.laporan.lebihSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
<DxGroupItem
|
||||||
|
:show-in-group-footer="true"
|
||||||
|
column="recoveryTime.laporan.kurangSla"
|
||||||
|
summary-type="sum"
|
||||||
|
display-format="{0}"
|
||||||
|
/>
|
||||||
|
</DxSummary>
|
||||||
|
</DxDataGrid>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import { computed, onMounted, ref, watch } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxGroupItem,
|
DxGroupItem,
|
||||||
DxGroupPanel,
|
DxGroupPanel,
|
||||||
DxGrouping,
|
DxGrouping,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection,
|
DxSelection,
|
||||||
DxSummary
|
DxSummary
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||||
@ -147,6 +366,7 @@ import { saveAs } from 'file-saver'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import { useQuery } from '@vue/apollo-composable'
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
|
|
||||||
const position = { of: '#data' }
|
const position = { of: '#data' }
|
||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
@ -192,114 +412,120 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
|
||||||
dateFrom: new Date().toISOString().slice(0, 10),
|
dateFrom: new Date().toISOString().slice(0, 10),
|
||||||
dateTo: new Date().toISOString().slice(0, 10),
|
dateTo: new Date().toISOString().slice(0, 10),
|
||||||
posko: '',
|
posko: '',
|
||||||
idUid: 0,
|
idUid: 0,
|
||||||
idUp3: 0
|
idUp3: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
|
|
||||||
exportToPdf({
|
exportToPdf({
|
||||||
jsPDFDocument: doc,
|
jsPDFDocument: doc,
|
||||||
component: e.component,
|
component: e.component,
|
||||||
indent: 5
|
indent: 5
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
doc.save(`.pdf`)
|
doc.save(`.pdf`)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet('Employees')
|
const worksheet = workbook.addWorksheet('Employees')
|
||||||
|
|
||||||
exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true
|
autoFilterEnabled: true
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
console.log(data)
|
console.log(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
const filterData = (params: any) => {
|
const filterData = (params: any) => {
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
|
|
||||||
refetch({
|
refetch({
|
||||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
dateFrom: dateValue[0]
|
||||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
posko: posko ? posko.id : 0,
|
: new Date().toISOString().slice(0, 10),
|
||||||
idUid: uid ? uid.id : 0,
|
dateTo: dateValue[1]
|
||||||
idUp3: up3 ? up3.id : 0
|
? dateValue[1].split('-').reverse().join('-')
|
||||||
})
|
: new Date().toISOString().slice(0, 10),
|
||||||
onResult((queryResult) => {
|
posko: posko ? posko.id : 0,
|
||||||
if (queryResult.data != undefined) {
|
idUid: uid ? uid.id : 0,
|
||||||
let no = 0
|
idUp3: up3 ? up3.id : 0
|
||||||
queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
|
})
|
||||||
dataReal.value = [
|
onResult((queryResult) => {
|
||||||
...dataReal.value,
|
if (queryResult.data != undefined) {
|
||||||
{
|
let no = 0
|
||||||
no: ++no,
|
queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
|
||||||
kode: item.tipe_permasalahan,
|
dataReal.value = [
|
||||||
jenisGangguan: item.tipe_permasalahan,
|
...dataReal.value,
|
||||||
laporan: {
|
{
|
||||||
total: item.total,
|
no: ++no,
|
||||||
sudahSelesai: {
|
kode: item.tipe_permasalahan,
|
||||||
jml: item.total_selesai,
|
jenisGangguan: item.tipe_permasalahan,
|
||||||
persen: item.persen_selesai
|
laporan: {
|
||||||
},
|
total: item.total,
|
||||||
belumSelesai: {
|
sudahSelesai: {
|
||||||
jml: item.total_inproses,
|
jml: item.total_selesai,
|
||||||
persen: item.persen_inproses
|
persen: item.persen_selesai
|
||||||
}
|
},
|
||||||
},
|
belumSelesai: {
|
||||||
responseTime: {
|
jml: item.total_inproses,
|
||||||
menit: {
|
persen: item.persen_inproses
|
||||||
total: item.avg_durasi_response,
|
}
|
||||||
rataRata: item.avg_durasi_response,
|
},
|
||||||
max: item.max_durasi_response,
|
responseTime: {
|
||||||
min: item.min_durasi_response
|
menit: {
|
||||||
},
|
total: item.avg_durasi_response,
|
||||||
laporan: {
|
rataRata: item.avg_durasi_response,
|
||||||
lebihSla: item.total_diatas_sla_response,
|
max: item.max_durasi_response,
|
||||||
kurangSla: item.total_dibawah_sla_response
|
min: item.min_durasi_response
|
||||||
}
|
},
|
||||||
},
|
laporan: {
|
||||||
recoveryTime: {
|
lebihSla: item.total_diatas_sla_response,
|
||||||
menit: {
|
kurangSla: item.total_dibawah_sla_response
|
||||||
total: item.avg_durasi_recovery,
|
}
|
||||||
rataRata: item.avg_durasi_recovery,
|
},
|
||||||
max: item.max_durasi_recovery,
|
recoveryTime: {
|
||||||
min: item.min_durasi_recovery
|
menit: {
|
||||||
},
|
total: item.avg_durasi_recovery,
|
||||||
laporan: {
|
rataRata: item.avg_durasi_recovery,
|
||||||
lebihSla: item.total_diatas_sla_recovery,
|
max: item.max_durasi_recovery,
|
||||||
kurangSla: item.total_dibawah_sla_recovery
|
min: item.min_durasi_recovery
|
||||||
}
|
},
|
||||||
}
|
laporan: {
|
||||||
}
|
lebihSla: item.total_diatas_sla_recovery,
|
||||||
]
|
kurangSla: item.total_dibawah_sla_recovery
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
console.log(queryResult.loading)
|
}
|
||||||
console.log(queryResult.networkStatus)
|
]
|
||||||
})
|
})
|
||||||
onError((queryError) => {
|
}
|
||||||
console.log(queryError)
|
console.log(queryResult.loading)
|
||||||
})
|
console.log(queryResult.networkStatus)
|
||||||
|
})
|
||||||
|
onError((queryError) => {
|
||||||
|
console.log(queryError)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = ref();
|
const filters = ref()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user