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

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

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

1
src/components/DatePicker.vue
View File

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

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

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

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

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

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">
<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 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">
<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 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">
<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 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">
<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 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">
<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>
</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">
<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>
</template>

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
<!-- <script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue';
fetchData();
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">
<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 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">
<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>
</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">
<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>
</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">
<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>
</template>

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

@ -2,7 +2,7 @@
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
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">
<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 class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -25,7 +25,7 @@ import { useTotalReport } from '@/stores/totalReport';
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="selectedUppp($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div 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">
<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 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">
<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 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">
<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>
</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">
<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 class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

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

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

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

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

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

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

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

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

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

@ -23,11 +23,11 @@
caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
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" />
<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" />
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
cell-template="data" />
@ -73,21 +73,21 @@
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Lapor:
</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 class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Response:
</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 class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Recovery:
</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 class="flex flex-row items-center justify-between w-full">
@ -272,7 +272,6 @@ watch(detected, () => {
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
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"
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" />
<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" />
<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" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="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"
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" />
<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" />
<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" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="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"
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" />
<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" />
<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" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="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"
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="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_lapor" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="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" />
</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"
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" />
<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" />
<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" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="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="pembuat_laporan" caption="Pembuat Laporan"
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"
css-class="custom-table-column" />
<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="pembuat_laporan" caption="Pembuat Laporan"
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"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -14,48 +14,48 @@
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="regu" caption="Kode 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 :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" />
<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" />
<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" />
</DxColumn>
<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" />
<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" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" 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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
</DxColumn>
</DxColumn>
<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" />
<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" />
</DxColumn>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
src/components/Select.vue
View File

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

4
src/components/SelectMulti.vue
View File

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