fix: daftar keluhan
This commit is contained in:
kur0nek-o
parent
80fdc2b1fe
commit
19b0ddc27e
@ -1408,10 +1408,6 @@ body {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
@ -4288,11 +4284,6 @@ body {
|
||||
border-color: rgb(104 157 170 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus\:border-indigo-500:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(99 102 241 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.focus\:bg-gray-300\/10:focus {
|
||||
background-color: rgb(209 213 219 / 0.1);
|
||||
}
|
||||
@ -5503,6 +5494,10 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sm\:max-w-\[90\%\] {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.sm\:max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
@ -5519,10 +5514,6 @@ body {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.sm\:max-w-\[90\%\] {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.sm\:flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
@ -10,17 +9,16 @@ import {
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputNumber from '@/components/Form/InputNumber.vue'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
@ -30,29 +28,26 @@ const data = ref({
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
up3.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
up3.value = value
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.ulp = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
ulp.value = value
|
||||
selectedUlp(value)
|
||||
data.value.ulp = value
|
||||
}
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
@ -61,13 +56,11 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Induk Distribusi/Wilayah:</label
|
||||
>
|
||||
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -84,9 +77,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
@update:selected="setUlp($event)"
|
||||
@ -99,23 +90,16 @@ onMounted(() => {
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputNumber @update:time-value="(value) => {
|
||||
data.minJmlLapor = value
|
||||
}" />
|
||||
<InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputNumber @update:time-value="(value) => {
|
||||
data.maxJmlLapor = value
|
||||
}" />
|
||||
<InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useTotalDuration } from '@/stores/totalDuration';
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useTotalDuration } from '@/stores/totalDuration'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
@ -12,16 +10,16 @@ import {
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
|
||||
const sla = [
|
||||
@ -33,7 +31,8 @@ const sla = [
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
];
|
||||
]
|
||||
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
@ -42,54 +41,58 @@ const data = ref({
|
||||
minTime: 1,
|
||||
maxTime: 1
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
up3.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
up3.value = value
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.ulp = value;
|
||||
};
|
||||
ulp.value = value
|
||||
selectedUlp(value)
|
||||
data.value.ulp = value
|
||||
}
|
||||
|
||||
const setMin = (value: any) => {
|
||||
console.log(value)
|
||||
data.value.minTime = value
|
||||
useTotalDuration().setDataMin(value)
|
||||
|
||||
}
|
||||
|
||||
const setMax = (value: any) => {
|
||||
data.value.maxTime = value
|
||||
useTotalDuration().setDataMax(value)
|
||||
}
|
||||
|
||||
const triggerInput = ref(false)
|
||||
const changeDuration = (value: any) => {
|
||||
if (value.id === 0) {
|
||||
setMin("1")
|
||||
setMax("5")
|
||||
setMin('1')
|
||||
setMax('5')
|
||||
console.log('Durasi Menit')
|
||||
triggerInput.value = false
|
||||
} else if (value.id === 1) {
|
||||
setMin("1")
|
||||
setMax("45")
|
||||
setMin('1')
|
||||
setMax('45')
|
||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||
triggerInput.value = true
|
||||
} else {
|
||||
setMin("45")
|
||||
setMin('45')
|
||||
setMax(99999 * 60 * 24)
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
@ -98,30 +101,41 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Induk Distribusi/Wilayah:</label
|
||||
>
|
||||
|
||||
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="up3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
|
||||
<Select
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
:selected="ulp"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -136,5 +150,4 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
|
||||
@ -25,6 +26,7 @@ const data = ref({
|
||||
ulp: ulp.value,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
@ -41,6 +43,7 @@ const setUp3 = (value: any) => {
|
||||
selectedUp3Ulp(value)
|
||||
ulp.value = { id: 0, name: ulpPlaceholder }
|
||||
data.value.up3 = value
|
||||
console.log(itemsUlp)
|
||||
}
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
@ -48,6 +51,7 @@ const setUlp = (value: any) => {
|
||||
selectedUlp(value)
|
||||
data.value.ulp = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchUid()
|
||||
emit('update:filters', data.value)
|
||||
@ -90,12 +94,6 @@ onMounted(() => {
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker
|
||||
@update:date-value="
|
||||
(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
"
|
||||
/>
|
||||
<DatePicker @update:date-value="(value) => (data.periode = value)" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -105,7 +105,7 @@ const fetchDataUlp = async (up3: number) => {
|
||||
const res = await getUlp(up3)
|
||||
itemsUlp.value = res.data.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: item.name
|
||||
name: item.nama
|
||||
}))
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
|
||||
@ -42,7 +42,7 @@ const switchInputType = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
|
||||
<div :class="['relative w-full overflow-hidden rounded-lg ', className]">
|
||||
<input
|
||||
autocomplete="off"
|
||||
:type="inputType"
|
||||
|
||||
@ -388,25 +388,20 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
avg_durasi_dispatch
|
||||
avg_durasi_recovery
|
||||
avg_durasi_response
|
||||
max_durasi_dispatch
|
||||
max_durasi_recovery
|
||||
max_durasi_response
|
||||
min_durasi_dispatch
|
||||
min_durasi_recovery
|
||||
min_durasi_response
|
||||
persen_inproses
|
||||
persen_selesai
|
||||
tipe_permasalahan
|
||||
total
|
||||
total_diatas_sla_dispatch
|
||||
total_diatas_sla_recovery
|
||||
total_diatas_sla_response
|
||||
total_dibawah_sla_recovery
|
||||
total_dibawah_sla_response
|
||||
total_dibawah_sla_dispatch
|
||||
total_inproses
|
||||
total_selesai
|
||||
}
|
||||
|
||||
@ -1,54 +1,164 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="pembuat_laporan"
|
||||
caption="Pembuat Laporan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_dialihkan"
|
||||
caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_unit_lama"
|
||||
caption="Unit Asal"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -65,7 +175,6 @@ import {
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
@ -76,10 +185,12 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -152,25 +263,33 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
|
||||
}
|
||||
}
|
||||
`
|
||||
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN,
|
||||
{
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, 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),
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
|
||||
@ -179,9 +298,11 @@ const filterData = (params: any) => {
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const filters = ref();
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,58 +1,179 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type10 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type10 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP" css-class="custom-table-column"
|
||||
cell-template="data" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="jumlah_lapor"
|
||||
caption="Jml Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
@ -65,110 +186,88 @@
|
||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Response:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Jml Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Response Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Recovery Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Telp Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama ULP:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -179,8 +278,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type10 from '@/components/Form/FiltersType/Type10.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -199,6 +297,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
@ -269,22 +368,20 @@ const GET_DATA = gql`
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
alamat_pelapor
|
||||
durasi_recovery_time
|
||||
durasi_response_time
|
||||
idpel_nometer
|
||||
jumlah_lapor
|
||||
keterangan_pelapor
|
||||
media
|
||||
nama_pelapor
|
||||
nama_unit
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
status_akhir
|
||||
waktu_lapor
|
||||
|
||||
waktu_recovery
|
||||
|
||||
waktu_response
|
||||
durasi_recovery_time
|
||||
durasi_response_time
|
||||
idpel_nometer
|
||||
jumlah_lapor
|
||||
keterangan_pelapor
|
||||
media
|
||||
nama_pelapor
|
||||
nama_ulp
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
status_akhir
|
||||
waktu_lapor
|
||||
waktu_recovery
|
||||
waktu_response
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -299,17 +396,20 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||
idUp3: 0
|
||||
})
|
||||
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3 } = params
|
||||
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
|
||||
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
|
||||
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
|
||||
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
|
||||
refetch({
|
||||
minJmlLapor: minJmlLapor,
|
||||
maxJmlLapor: maxJmlLapor,
|
||||
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),
|
||||
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),
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
@ -317,6 +417,7 @@ const filterData = (params: any) => {
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
|
||||
console.log(data.value[0])
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
@ -327,5 +428,5 @@ const filterData = (params: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
const filters = ref();
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,51 +1,164 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
@ -56,110 +169,83 @@
|
||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Response:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Jml Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Response Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Recovery Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Telp Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama ULP:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -171,7 +257,6 @@ import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type11 from '@/components/Form/FiltersType/Type11.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -180,7 +265,6 @@ import {
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
@ -191,10 +275,11 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
|
||||
@ -267,7 +352,7 @@ const GET_DATA = gql`
|
||||
keterangan_pelapor
|
||||
media
|
||||
nama_pelapor
|
||||
nama_unit
|
||||
nama_ulp
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
status_akhir
|
||||
@ -277,6 +362,7 @@ const GET_DATA = gql`
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
|
||||
@ -286,12 +372,17 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3, maxTime, minTime } = 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),
|
||||
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),
|
||||
minDurasiResponseTime: minTime,
|
||||
maxDurasiResponseTime: maxTime,
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
@ -311,5 +402,6 @@ const filterData = (params: any) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const filters = ref();
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,51 +1,164 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type11 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
@ -57,110 +170,83 @@
|
||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Response:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Jml Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Response Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Recovery Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Telp Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama ULP:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -171,8 +257,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type11 from '@/components/Form/FiltersType/Type11.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -181,7 +266,6 @@ import {
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
@ -192,6 +276,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
@ -262,19 +347,19 @@ const GET_DATA = gql`
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
alamat_pelapor
|
||||
durasi_recovery_time
|
||||
durasi_response_time
|
||||
idpel_nometer
|
||||
keterangan_pelapor
|
||||
media
|
||||
nama_pelapor
|
||||
nama_unit
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
status_akhir
|
||||
waktu_lapor
|
||||
waktu_recovery
|
||||
waktu_response
|
||||
durasi_recovery_time
|
||||
durasi_response_time
|
||||
idpel_nometer
|
||||
keterangan_pelapor
|
||||
media
|
||||
nama_pelapor
|
||||
nama_ulp
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
status_akhir
|
||||
waktu_lapor
|
||||
waktu_recovery
|
||||
waktu_response
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -293,8 +378,12 @@ const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { ulp, uid, up3, minTime, maxTime } = 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),
|
||||
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),
|
||||
minDurasiRecoveryTime: minTime,
|
||||
maxDurasiRecoveryTime: maxTime,
|
||||
idUlp: ulp ? ulp.id : 0,
|
||||
@ -304,7 +393,6 @@ const filterData = (params: any) => {
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanRecoveryTime
|
||||
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
@ -313,7 +401,7 @@ const filterData = (params: any) => {
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
}
|
||||
const filters = ref();
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,174 +1,259 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_response_time"
|
||||
caption="Durasi Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Durasi Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="idpel_nometer"
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama ULP"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Response:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tanggal Recovery:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Jml Lapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Response Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Recovery Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
IDPEL/NO METER:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Telp Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama ULP:
|
||||
</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -179,8 +264,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -189,7 +273,6 @@ import {
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
@ -200,6 +283,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
@ -268,15 +352,15 @@ const GET_DATA = gql`
|
||||
alamat_pelapor
|
||||
durasi_recovery_time
|
||||
durasi_response_time
|
||||
id_keluhan
|
||||
idpel_nometer
|
||||
keterangan_pelapor
|
||||
media
|
||||
nama_ulp
|
||||
nama_pelapor
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
idUlp
|
||||
status_akhir
|
||||
waktu_lapor
|
||||
waktu_recovery
|
||||
waktu_response
|
||||
}
|
||||
@ -295,8 +379,12 @@ const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { idUlp, 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),
|
||||
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),
|
||||
idUlp: idUlp ? idUlp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
@ -305,7 +393,6 @@ const filterData = (params: any) => {
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
|
||||
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
@ -315,5 +402,6 @@ const filterData = (params: any) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const filters = ref();
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,54 +1,173 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Telp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="120"
|
||||
alignment="center"
|
||||
data-field="status_akhir"
|
||||
caption="Status"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_lapor"
|
||||
caption="Tgl Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
|
||||
css-class="custom-table-column" cell-template="data" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Tgl Response"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="waktu_recovery"
|
||||
caption="Tgl Recovery"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_response"
|
||||
caption="Response Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="durasi_recovery_time"
|
||||
caption="Recovery Time"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="waktu_media"
|
||||
caption="Tgl Media"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_media"
|
||||
caption="Keterangan Media"
|
||||
css-class="custom-table-column"
|
||||
cell-template="data"
|
||||
/>
|
||||
<template #data="{ data }">
|
||||
<span class="cursor-pointer" @click="showData()">
|
||||
{{ data.text }}
|
||||
@ -60,104 +179,88 @@
|
||||
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
|
||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Laporan:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Nama Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
No Telp Pelapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Alamat Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.alamat_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Pelapor:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_pelapor"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Status:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Response:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Recovery:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Response Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Recovery Time:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Sumber Lapor:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Tgl Media:
|
||||
</h3>
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Media:</h3>
|
||||
<InputText :readonly="true" :value="dataDetail?.waktu_media" class-name="flex-1" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||
Keterangan Media:
|
||||
</h3>
|
||||
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media"
|
||||
class-name="flex-1 h-[56px]" />
|
||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
||||
<InputText
|
||||
:readonly="true"
|
||||
type="textarea"
|
||||
:value="dataDetail?.keterangan_media"
|
||||
class-name="flex-1 h-[56px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
@ -168,8 +271,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -178,7 +280,6 @@ import {
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
@ -189,6 +290,7 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
@ -246,7 +348,6 @@ const GET_DATA = gql`
|
||||
$idUlp: Int!
|
||||
$idUid: Int!
|
||||
$idUp3: Int!
|
||||
$media: String!
|
||||
) {
|
||||
daftarKeluhanBerdasarkanMedia(
|
||||
dateFrom: $dateFrom
|
||||
@ -254,19 +355,19 @@ const GET_DATA = gql`
|
||||
idUlp: $idUlp
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
media: $media
|
||||
) {
|
||||
alamat_pelapor
|
||||
durasi_recovery_time
|
||||
durasi_response_time
|
||||
id_keluhan
|
||||
idpel_nometer
|
||||
keterangan_pelapor
|
||||
media
|
||||
waktu_media
|
||||
keterangan_media
|
||||
waktu_lapor
|
||||
nama_pelapor
|
||||
no_laporan
|
||||
no_telp_pelapor
|
||||
idUlp
|
||||
nama_ulp
|
||||
status_akhir
|
||||
waktu_recovery
|
||||
waktu_response
|
||||
@ -286,8 +387,12 @@ const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { idUlp, 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),
|
||||
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),
|
||||
idUlp: idUlp ? idUlp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
@ -296,7 +401,6 @@ const filterData = (params: any) => {
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
|
||||
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
@ -306,5 +410,6 @@ const filterData = (params: any) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const filters = ref();
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
|
||||
@ -1,52 +1,173 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => filters = value" />
|
||||
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => (filters = value)" />
|
||||
</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">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
:row-alternation-enabled="true"
|
||||
:hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged"
|
||||
:column-width="100"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
|
||||
<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" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_laporan"
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Contact Center"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="UI Dist."
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="ULP"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="IDPEL/NO METER"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="nama_pelapor"
|
||||
caption="Nama Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="alamat_pelapor"
|
||||
caption="Alamat Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="no_telp_pelapor"
|
||||
caption="No Tlp Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="keterangan_pelapor"
|
||||
caption="Keterangan Pelapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="APKT Status"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Created By"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Penyelesaian"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Lapor Ulang"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field="media"
|
||||
caption="Sumber Lapor"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Issue Type"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="170"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Sub Issue Type"
|
||||
css-class="custom-table-column"
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -54,7 +175,7 @@
|
||||
<script setup lang="ts">
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -63,7 +184,6 @@ import {
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
} from 'devextreme-vue/data-grid'
|
||||
@ -74,10 +194,11 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -114,16 +235,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
|
||||
const data = ref<any[]>([])
|
||||
const GET_DATA = gql`
|
||||
query daftarKeluhanDiselesaikanCC123
|
||||
(
|
||||
query daftarKeluhanDiselesaikanCC123(
|
||||
$dateFrom: Date!
|
||||
$dateTo: Date!
|
||||
$idUlp: Int!
|
||||
$idUid: Int!
|
||||
$idUp3: Int!
|
||||
) {
|
||||
daftarKeluhanDiselesaikanCC123
|
||||
(
|
||||
) {
|
||||
daftarKeluhanDiselesaikanCC123(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
idUlp: $idUlp
|
||||
@ -156,15 +275,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||
idUp3: 0,
|
||||
media: 'Twitter'
|
||||
})
|
||||
const filters = ref();
|
||||
const filters = ref()
|
||||
|
||||
const filterData = (params: any) => {
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
const { idUlp, uid, up3 } = params
|
||||
const media = params.media ? params.media.id : ''
|
||||
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),
|
||||
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),
|
||||
idUlp: idUlp ? idUlp.id : 0,
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user