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

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

Browse Source
This commit is contained in:
probdg
2024-02-09 19:45:59 +07:00
parent 6296078f2b 945914a48b
commit 38f0797385
39 changed files with 839 additions and 831 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,13 +58,17 @@ onMounted(() => {
<template> <template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label> <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" /> <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
</div> </div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center"> <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<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="uppp" :placeholder="uppPlaceholder" /> <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -53,159 +53,40 @@
:allow-export-selected-data="false" :allow-export-selected-data="false"
/> />
<DxColumn <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
css-class="custom-table-column" caption="Pembuat Laporan" cell-template="data" />
:width="50" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
alignment="center" caption="Tgl Lapor" cell-template="data" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
data-type="number" caption="Tgl Dialihkan" cell-template="data" />
caption="No" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
/> caption="Tgl Response" cell-template="data" />
<DxColumn <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
css-class="custom-table-column" caption="Tgl Recovery" cell-template="data" />
:width="150" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
alignment="center" caption="Durasi Response Time" cell-template="data" />
data-field="no_laporan" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="No Laporan" caption="Durasi Recovery Time" cell-template="data" />
cell-template="data" <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
/> caption="Posko Awal" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
<DxColumn caption="Posko Tujuan" cell-template="data" />
css-class="custom-table-column" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
:width="150" caption="Status" cell-template="data" />
alignment="center" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
data-field="pembuat_laporan" caption="IDPEL/NO METER" cell-template="data" />
caption="Pembuat Laporan" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
cell-template="data" caption="Nama Pelapor" cell-template="data" />
/> <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
<DxColumn caption="Alamat Pelapor" cell-template="data" />
css-class="custom-table-column" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
:width="150" caption="No Telp Pelapor" cell-template="data" />
alignment="center" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
data-field="tanggal_laporan" caption="Keterangan Pelapor" cell-template="data" />
caption="Tgl Lapor" <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
cell-template="data" caption="Sumber Lapor" cell-template="data" />
/> <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
<DxColumn cell-template="data" />
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="tanggal_dialihkan"
caption="Tgl Dialihkan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="tanggal_respon"
caption="Tgl Response"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="tanggal_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_respon_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="posko_asal"
caption="Posko Awal"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="posko_tujuan"
caption="Posko Tujuan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<span class="cursor-pointer" @click="showData()"> <span class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -214,115 +95,142 @@
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
:open="showDetail"
title="Daftar Gangguan Dialihkan ke Posko Lain"
@on-close="closeDetail"
>
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">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" /> <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Pembuat Laporan:
</h3>
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
<InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" /> Tanggal Laporan:
</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
<InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" /> Tanggal Dialihkan:
</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
<InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" /> Tanggal Respon:
</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
<InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" /> Tanggal Recovery:
</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Recovery Time:
</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Awal:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Tujuan:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Status:
</h3>
<InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER:
</h3>
<InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">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" /> <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
<InputText Alamat Pelapor:
:readonly="true" </h3>
type="textarea" <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
:value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Pembuat Laporan:
</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Keterangan Pelapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Sumber Laporan:
</h3>
<InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko:
</h3>
<InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" /> <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// filters components
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -471,7 +379,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
dataDetail.value = data dataDetail.value = data
console.log(data) console.log(data)
} }
const showData = () => { const showData = () => {
showDetail.value = true showDetail.value = true
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

File diff suppressed because it is too large Load Diff

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

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

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

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

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

@ -126,7 +126,7 @@ const GET_DATA = gql`
alamat_pelapor alamat_pelapor
durasi_recovery_time durasi_recovery_time
durasi_response_time durasi_response_time
id_keluhan! id_keluhan
idpel_nometer idpel_nometer
keterangan_pelapor keterangan_pelapor
media media
@ -134,7 +134,7 @@ const GET_DATA = gql`
no_laporan no_laporan
no_telp_pelapor no_telp_pelapor
posko posko
status_akhir! status_akhir
waktu_recovery waktu_recovery
waktu_response waktu_response
} }

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

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

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

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

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

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

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

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

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

@ -14,18 +14,10 @@
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" /> caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1" <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
css-class="custom-table-column" /> :caption="i" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>

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

@ -14,48 +14,48 @@
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" /> <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1" <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2" <DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3" <DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4" <DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5" <DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks" <DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
css-class="custom-table-column" /> css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" <DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxColumn> </DxColumn>

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

@ -2,16 +2,13 @@
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
:show-indicator="showIndicator" v-if="loading" v-model:visible.sync="loading" :enabled="true" />
:show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
@ -60,7 +57,7 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { fetchStatus } from '@/components/Form/FiltersType/reference' import { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
import { useDateStore } from '@/stores/date' import { useDateStore } from '@/stores/date'
import { useSearchStore } from '@/stores/filtersAction' import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts' import { usePostsStore } from '@/stores/posts'
@ -73,6 +70,7 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
@ -139,6 +137,7 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
bulan: 10, bulan: 10,
tahun: 2023 tahun: 2023
}) })
const reportButton = useSearchStore() const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange) const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => { watch(detected, () => {
@ -155,7 +154,7 @@ watch(detected, () => {
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.monalisaJumlahKaliGangguan data.value = queryResult.data.monalisaJumlahKaliGangguan;
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)

4
src/components/Select.vue
View File

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