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

Merge branch 'dev-defuj' of https://github.com/defuj/eis into development

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-02-28 15:29:06 +07:00
commit cf2db61c84
97 changed files with 8491 additions and 4976 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -1,4 +1,6 @@
VITE_BASE_URL=http://localhost:5173
VITE_BASE_DIRECTORY=/
VITE_APP_VERSION=0.0.1
VITE_APP_NAME='Executive Information System'
VITE_APP_NAME='Executive Information System'
VITE_APP_GRAPHQL_ENDPOINT=http://192.168.5.213:32169/graphql
VITE_APP_REST_ENDPOINT=http://192.168.5.213:32180

4
.env.production
View File

@ -1,4 +1,6 @@
VITE_BASE_URL=https://api.domain.com/v1/
VITE_BASE_DIRECTORY=/
VITE_APP_VERSION=0.0.1
VITE_APP_NAME='Executive Information System'
VITE_APP_NAME='Executive Information System'
VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181

16
Dockerfile
View File

@ -1,9 +1,9 @@
# FROM node:lts-alpine as build-stage
# WORKDIR /app
FROM node:lts-alpine as build-stage
WORKDIR /app
# COPY package*.json ./
# RUN npm install
# COPY . .
# RUN npm run build
COPY . .
RUN npm run build
# FROM nginx:stable-alpine as production-stage
# COPY --from=build-stage /app/dist /usr/share/nginx/html
@ -15,4 +15,10 @@ FROM nginx:stable-alpine
COPY /dist /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/nginx.conf
EXPOSE 32166
CMD ["nginx", "-g", "daemon off;"]
CMD ["nginx", "-g", "daemon off;"]
# FROM nginx:stable-alpine
# COPY /dist /usr/share/nginx/html
# COPY /nginx.conf /etc/nginx/nginx.conf
# EXPOSE 32166
# CMD ["nginx", "-g", "daemon off;"]

76
README.md
View File

@ -1,52 +1,26 @@
# Executive Information System
# TABLE MENU DOCUMENTATION
## Monalisa
### Gangguan > Rekapitulasi
| CODE | MENU | FILE |
| ------- | ---------------------------------------- | ------------ |
| MON0001 | Jumlah Kali Gangguan | Table_36.vue |
| MON0002 | Dispacthing Time (DT) Gangguan | Table_37.vue |
| MON0003 | Recovery Time (RCT) Gangguan | Table_38.vue |
| MON0004 | Response Time (RPT) Gangguan | Table_39.vue |
| MON0005 | Jumlah dan Durasi RPT RCT Gangguan | Table_40.vue |
| MON0006 | Rekapitulasi Gangguan Per Jenis Gangguan | Table_41.vue |
| MON0007 | Rekapitulasi Lapor Ulang Gangguan | Table_42.vue |
| MON0008 | Rekapitulasi ENS Gangguan | Table_43.vue |
| MON0009 | Rekapitulasi Gangguan Belum Selesai | Table_44.vue |
| MON0010 | Jumlah Kali Keluhan | Table_45.vue |
| MON0011 | Recovery Time (RCT) Keluhan | Table_46.vue |
| MON0012 | Response Time (RPT) Keluhan | Table_47.vue |
| MON0013 | Jumlah dan Durasi RPT RCT Keluhan | Table_48.vue |
| MON0014 | Rekapitulasi Gangguan Per Jenis Keluhan | Table_49.vue |
| MON0015 | Rekapitulasi Lapor Ulang Keluhan | Table_50.vue |
| MON0016 | Rekapitulasi Gangguan Belum Selesai | Table_51.vue |
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
### Keluhan > Rekapitulasi
| CODE | MENU | FILE |
| ------- | ------------------- | ------------ |
| MON0010 | Jumlah Kali Keluhan | Table_45.vue |

45
src/assets/css/style.css
View File

@ -1145,10 +1145,6 @@ body {
margin: 0.875rem;
}
.m-auto {
margin: auto;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
@ -1257,6 +1253,10 @@ body {
margin-top: -1px;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -1525,6 +1525,10 @@ body {
height: 80vh;
}
.h-\[400px\] {
height: 400px;
}
.max-h-0 {
max-height: 0px;
}
@ -2622,11 +2626,6 @@ body {
background-color: rgb(255 204 204 / var(--tw-bg-opacity));
}
.bg-red-300 {
--tw-bg-opacity: 1;
background-color: rgb(255 102 102 / var(--tw-bg-opacity));
}
.bg-red-300\/10 {
background-color: rgb(255 102 102 / 0.1);
}
@ -5499,6 +5498,10 @@ body {
width: 100%;
}
.sm\:max-w-\[90\%\] {
max-width: 90%;
}
.sm\:max-w-lg {
max-width: 32rem;
}
@ -5899,6 +5902,10 @@ body {
width: 2.5rem;
}
.lg\:w-2\/6 {
width: 33.333333%;
}
.lg\:w-80 {
width: 20rem;
}
@ -5907,10 +5914,30 @@ body {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.lg\:border-b-0 {
border-bottom-width: 0px;
}

25
src/components/DatePicker.vue
View File

@ -1,7 +1,6 @@
<script setup lang="ts">
import { PhCalendarBlank } from '@phosphor-icons/vue'
import { ref, watch } from 'vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
const dateValue = ref('')
@ -9,27 +8,27 @@ const formatter = ref({
date: 'DD-MM-YYYY',
month: 'MMMM'
})
const emit = defineEmits(['update:dateValue'])
const customShortcuts = () => {
return [
{
label: "Last 15 Days",
label: 'Last 15 Days',
atClick: () => {
const date = new Date();
return [new Date(date.setDate(date.getDate() + 1)), date];
},
const date = new Date()
return [new Date(date.setDate(date.getDate() + 1)), date]
}
},
{
label: "Last Years",
label: 'Last Years',
atClick: () => {
const date = new Date();
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
},
},
const date = new Date()
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
}
}
]
}
];
};
watch(dateValue, (newValue) => {
emit('update:dateValue', newValue)
})

6
src/components/Dialogs/DetailDialog.vue
View File

@ -15,6 +15,10 @@ defineProps({
type: String,
required: true,
},
fullWidth: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['onClose'])
const handleOnClose = () => {
@ -38,7 +42,7 @@ const handleOnClose = () => {
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<DialogPanel
:class="['sm:max-w-lg relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
:class="[fullWidth ? 'sm:max-w-[90%]' : 'sm:max-w-lg', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:my-8 sm:w-full']">
<!-- Body Section -->
<div class="px-4 py-4 bg-gray-50">
<div class="flex flex-col items-start">

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

@ -1,11 +1,15 @@
<!-- ss -->
<script setup lang="ts">
// components
import Button from '@/components/Button.vue'
// icons
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
const emit = defineEmits(['runSearch','resetForm'])
defineProps({
reportButton: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['runSearch', 'resetForm', 'runReport'])
</script>
<template>
@ -26,10 +30,12 @@ const emit = defineEmits(['runSearch','resetForm'])
</Button>
<Button
v-if="reportButton"
label="Lihat Laporan"
style-type="outline"
class-name="bg-white"
>
@on:click="() => emit('runReport')"
>
<PhFileText size="18" class="ml-1" weight="regular" />
</Button>

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

@ -11,6 +11,7 @@ import {
fetchUid
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
@ -39,6 +40,7 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
up3.value = value
selectedUp3Posko(value)
console.log(itemsPosko)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
@ -57,28 +59,39 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3placeholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</template>

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

@ -1,6 +1,5 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { onMounted, ref } from 'vue'
import {
selectedUid,
selectedUp3Ulp,
@ -10,49 +9,45 @@ import {
itemsUp3,
itemsUlp
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputNumber from '@/components/Form/InputNumber.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: up3.value,
posko: ulp.value,
ulp: ulp.value,
periode: '',
minJmlLapor: 1,
maxJmlLapor: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
uid.value = value
selectedUid(value)
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
up3.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
data.value.up3 = value;
};
up3.value = value
selectedUp3Ulp(value)
ulp.value = { id: 0, name: ulpPlaceholder }
data.value.up3 = value
}
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
ulp.value = value
selectedUlp(value)
data.value.ulp = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -61,13 +56,11 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -75,18 +68,16 @@ onMounted(() => {
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Layanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select
@update:selected="setUlp($event)"
@ -99,23 +90,16 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputNumber @update:time-value="(value) => {
data.minJmlLapor = value
}" />
<InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
<small class="flex items-center">s/d</small>
<InputNumber @update:time-value="(value) => {
data.maxJmlLapor = value
}" />
<InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" />
</div>
</div>
</template>

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

@ -1,8 +1,6 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useTotalDuration } from '@/stores/totalDuration';
import { onMounted, ref } from 'vue'
import { useTotalDuration } from '@/stores/totalDuration'
import {
selectedUid,
selectedUp3Ulp,
@ -12,16 +10,16 @@ import {
itemsUp3,
itemsUlp
} from './reference'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const ulp = ref({ id: 0, name: ulpPlaceholder })
const emit = defineEmits(['update:filters'])
const sla = [
@ -33,63 +31,68 @@ const sla = [
id: 2,
name: 'Melebihi SLA (> 45 menit)'
}
];
]
const data = ref({
uid: uid.value,
up3: up3.value,
posko: ulp.value,
ulp: ulp.value,
periode: '',
minTime: 1,
maxTime: 1
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
uid.value = value
selectedUid(value)
up3.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
const setUp3 = (value: any) => {
up3.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
data.value.up3 = value;
};
up3.value = value
selectedUp3Ulp(value)
ulp.value = { id: 0, name: ulpPlaceholder }
data.value.up3 = value
}
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
};
ulp.value = value
selectedUlp(value)
data.value.ulp = value
}
const setMin = (value: any) => {
console.log(value)
data.value.minTime = value
useTotalDuration().setDataMin(value)
}
const setMax = (value: any) => {
data.value.maxTime = value
useTotalDuration().setDataMax(value)
}
const triggerInput = ref(false)
const changeDuration = (value: any) => {
if (value.id === 0) {
setMin("1")
setMax("5")
setMin('1')
setMax('5')
console.log('Durasi Menit')
triggerInput.value = false
} else if (value.id === 1) {
setMin("1")
setMax("45")
setMin('1')
setMax('45')
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
} else {
setMin("45")
setMin('45')
setMax(99999 * 60 * 24)
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
}
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -98,30 +101,41 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
<Select
@update:selected="setUlp($event)"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
:selected="ulp"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -136,5 +150,4 @@ onMounted(() => {
</div>
</div>
</div>
</template>

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

@ -9,12 +9,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
ulp: ulp.value,
periode: '',
minDurasiResponseTime: 1,
maxDurasiResponseTime: 1
@ -29,14 +29,14 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
data.value.ulp = value;
};
const triggerInput = ref(false)
const sla = [

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

@ -2,50 +2,41 @@
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import {
selectedUid,
selectedUp3Ulp,
selectedUlp,
fetchUid,
itemsUid,
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
const uppp = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const up3 = ref({ id: 0, name: up3Placeholder })
const ulp = ref({ id: '', name: ulpPlaceholder })
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
up3: up3.value,
ulp: ulp.value,
periode: '',
group: 1
})
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
uppp.value = { id: 0, name: up3Placeholder }
data.value.uid = value
}
uid.value = value;
selectedUid(value);
up3.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Ulp(value)
ulp.value = { id: '', name: ulpPlaceholder }
data.value.up3 = value
}
up3.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value
selectedUlp(value)
data.value.posko = value
}
ulp.value = value;
selectedUlp(value);
data.value.ulp = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -54,65 +45,38 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<Select
@update:selected="setUlp($event)"
:selected="ulp"
:data="itemsUlp"
:placeholder="ulpPlaceholder"
/>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker
@update:date-value="
(value) => {
data.periode = value
}
"
/>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Group By Kode Unit Distribusi:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
<InlineRadioGroup
@update:group-value="
(value) => {
data.group = value
console.log('data.group', value)
}
"
:radio-items="[
{ id: 1, title: 'Tidak' },
{ id: 2, title: 'Ya, Grupkan' }
]"
/>
<InlineRadioGroup @update:group-value="(value) => {
data.group = value
console.log('data.group', value)
}" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
</div>
</template>

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

@ -8,12 +8,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
ulp: ulp.value,
periode: '',
group: 1
})

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

@ -13,6 +13,7 @@ import {
itemsMedia
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Posko'
@ -20,7 +21,7 @@ const mediaPlaceholder = 'Semua Media'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const media = ref({ id: "", name: mediaPlaceholder })
const media = ref({ id: '', name: mediaPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
@ -53,10 +54,12 @@ const setPosko = (value: any) => {
selectedPosko(value)
data.value.posko = value
}
const setMedia = (value: any) => {
media.value = value
data.value.media = value
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
@ -116,12 +119,6 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker
@update:date-value="
(value) => {
data.periode = value
}
"
/>
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</template>

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

@ -11,7 +11,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Posko';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: "", name: poskoPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const emit = defineEmits(['update:filters'])
const jenisTransakasi = [
{ id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },

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

@ -46,7 +46,7 @@ const data = ref({
regional: regional.value,
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
ulp: ulp.value,
periode: '',
bulan: bulan.value,
tahun: tahun.value
@ -77,7 +77,7 @@ const setUp3 = (value: any) => {
const setUlp = (value: any) => {
ulp.value = value
selectedUp3Ulp(value)
data.value.posko = value
data.value.ulp = value
}
const setMonth = (value: any) => {
bulan.value = value
@ -96,39 +96,31 @@ onMounted(() => {
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Regional:</label>
<Select
@update:selected="setRegional($event)"
:data="itemsRegional"
:placeholder="regionalPlaceholder"
/>
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
<label class="block mb-2 font-semibold text-gray-800 sm:mb-0">Periode</label>
<div class="grid grid-cols-2 gap-x-2">
<Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />

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

@ -11,6 +11,7 @@ import {
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@ -25,6 +26,7 @@ const data = ref({
ulp: ulp.value,
periode: ''
})
watch(data.value, (value) => {
emit('update:filters', value)
})
@ -41,6 +43,7 @@ const setUp3 = (value: any) => {
selectedUp3Ulp(value)
ulp.value = { id: 0, name: ulpPlaceholder }
data.value.up3 = value
console.log(itemsUlp)
}
const setUlp = (value: any) => {
@ -48,6 +51,7 @@ const setUlp = (value: any) => {
selectedUlp(value)
data.value.ulp = value
}
onMounted(() => {
fetchUid()
emit('update:filters', data.value)
@ -90,12 +94,6 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker
@update:date-value="
(value) => {
data.periode = value
}
"
/>
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</template>

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

@ -8,12 +8,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: "", name: ulpPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
ulp: ulp.value,
periode: '',
jenisLaporan : ''
})
@ -27,14 +27,14 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: "", name: ulpPlaceholder };
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
data.value.ulp = value;
};
onMounted(() => {
emit('update:filters', data.value)

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

@ -2,15 +2,24 @@
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { onMounted, ref } from 'vue';
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import { onMounted, ref } from 'vue'
const emit = defineEmits(['update:filters'])
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const data = ref({
uid: uid.value,
up3: up3.value,
@ -41,50 +50,63 @@ const setPosko = (value: any) => {
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
emit('update:filters', data.value)
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
data.minJmlLapor = value
}" />
<InputNumber
:value="data.minJmlLapor"
@update:time-value="(value) => (data.minJmlLapor = value)"
/>
<small class="flex items-center">s/d</small>
<InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
data.maxJmlLapor = value
}" />
<InputNumber
:value="data.maxJmlLapor"
@update:time-value="(value) => (data.maxJmlLapor = value)"
/>
</div>
</div>
</template>

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

@ -1,18 +1,26 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue';
import { useTotalDuration } from '@/stores/totalDuration';
import InputWithSuffix from '../InputWithSuffix.vue'
import { useTotalDuration } from '@/stores/totalDuration'
import {
selectedUid,
selectedUp3Posko,
selectedPosko,
fetchUid,
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { onMounted, ref, watch } from 'vue';
const emit = defineEmits(['update:filters'])
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
const up3 = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const posko = ref({ id: 0, name: poskoPlaceholder });
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
const up3 = ref({ id: 0, name: up3Placeholder })
const uid = ref({ id: 0, name: uidPlaceholder })
const posko = ref({ id: 0, name: poskoPlaceholder })
const data = ref({
uid: uid.value,
up3: up3.value,
@ -21,6 +29,7 @@ const data = ref({
minTime: useTotalDuration().getDataMin().split(' ')[0],
maxTime: useTotalDuration().getDataMax().split(' ')[0]
})
const setUid = (value: any) => {
uid.value = value
selectedUid(value)
@ -49,14 +58,12 @@ const sla = [
id: 2,
name: 'Melebihi SLA (> 45 menit)'
}
]
const setMin = (value: any) => {
console.log(value)
data.value.minTime = value
useTotalDuration().setDataMin(value)
}
const setMax = (value: any) => {
data.value.maxTime = value
@ -65,17 +72,17 @@ const setMax = (value: any) => {
const triggerInput = ref(false)
const changeDuration = (value: any) => {
if (value.id === 0) {
setMin("1")
setMax("5")
setMin('1')
setMax('5')
console.log('Durasi Menit')
triggerInput.value = false
} else if (value.id === 1) {
setMin("1")
setMax("45")
setMin('1')
setMax('45')
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
triggerInput.value = true
} else {
setMin("45")
setMin('45')
setMax(99999 * 60 * 24)
triggerInput.value = true
console.log('Melebihi SLA (> 45 menit)')
@ -84,38 +91,50 @@ const changeDuration = (value: any) => {
watch(data, (newValue) => {
emit('update:filters', newValue)
})
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
emit('update:filters', data.value)
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="up3"
:placeholder="up3Placeholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:selected="posko"
:placeholder="poskoPlaceholder"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -125,12 +144,9 @@ onMounted(() => {
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputWithSuffix
:value="`${data.minTime} Menit`"
/>
<InputWithSuffix :value="`${data.minTime} Menit`" />
<small class="flex items-center">s/d</small>
<InputWithSuffix
:value="`${data.maxTime} Menit`"/>
<InputWithSuffix :value="`${data.maxTime} Menit`" />
</div>
</div>
</div>

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

@ -3,13 +3,7 @@ import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { onMounted, ref, watch } from 'vue'
import {
selectedUid,
selectedUp3Posko,
fetchUid,
itemsUid,
itemsUp3,
} from './reference'
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@ -38,8 +32,6 @@ const setUid = (value: any) => {
const setUp3 = (value: any) => {
uppp.value = value
selectedUp3Posko(value)
posko.value = { id: 0, name: poskoPlaceholder }
data.value.up3 = value
}
@ -47,26 +39,26 @@ onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<Select
@update:selected="setUp3($event)"
:data="itemsUp3"
:selected="uppp"
:placeholder="uppPlaceholder"
/>
</div>
@ -74,9 +66,6 @@ onMounted(() => {
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
</template>

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

@ -1,7 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import { onMounted, ref, watch } from 'vue'
import {
@ -19,13 +19,14 @@ 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 posko = ref({ id: 0, name: poskoPlaceholder })
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: posko.value,
periode: ''
periode: '',
groupBy: false
})
watch(data.value, (value) => {
@ -53,20 +54,18 @@ const setPosko = (value: any) => {
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
emit('update:filters', data.value)
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Induk Distribusi/Wilayah:</label
>
<Select
@update:selected="setUid($event)"
:data="itemsUid"
:placeholder="uidPlaceholder"
/>
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -78,31 +77,38 @@ onMounted(() => {
@update:selected="setUp3($event)"
:data="itemsUp3"
:placeholder="uppPlaceholder"
:selected="uppp"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
<Select
@update:selected="setPosko($event)"
:data="itemsPosko"
:placeholder="poskoPlaceholder"
:selected="posko"
/>
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => (data.periode = value)" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Group By Kode Unit Distribusi:</label
>
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
<InlineRadioGroup
@update:group-value="(value) => (data.groupBy = value.id === 2)"
:radio-items="[
{ id: 1, title: 'Tidak', checked: true },
{ id: 2, title: 'Ya, Grupkan' }
]"
/>
</div>
</template>

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

@ -105,7 +105,7 @@ const fetchDataUlp = async (up3: number) => {
const res = await getUlp(up3)
itemsUlp.value = res.data.map((item: any) => ({
id: item.id,
name: item.name
name: item.nama
}))
} catch (error) {
console.error('Error fetching data:', error)

28
src/components/Form/InlineRadioGroup.vue
View File

@ -3,13 +3,19 @@
<fieldset>
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
<input v-model="groupValue"
type="radio" name="radio"
<input
v-model="groupValue"
type="radio"
name="radio"
:checked="itemSelected.id === item.id ? true : false"
@change="onChange(item)"
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
item.title }}</label>
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
/>
<label
:for="`${item.id}`"
class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500"
>{{ item.title }}</label
>
</div>
</div>
</fieldset>
@ -17,16 +23,17 @@
</template>
<script setup lang="ts">
import { ref, watch, type PropType, onMounted } from 'vue'
import { ref, type PropType, onMounted } from 'vue'
interface Item {
id: number;
title: string;
checked?: boolean;
id: number
title: string
checked?: boolean
}
const onChange= (e:Item) => {
const onChange = (e: Item) => {
itemSelected.value = e
console.log(e)
emit('update:groupValue', e)
}
@ -44,5 +51,4 @@ const groupValue = ref(1)
onMounted(() => {
itemSelected.value = props.radioItems[0]
})
</script>

11
src/components/Form/InputNumber.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
defineProps({
placeholder: {
type: String,
default: ''
@ -16,15 +16,16 @@ const props = defineProps({
},
value: {
type: Number,
default: ''
default: 1
}
})
const emit = defineEmits(['update:timeValue'])
const timeValue = ref(1)
watch(timeValue, (newValue) => {
emit('update:timeValue', newValue)
})
</script>
<template>
@ -38,8 +39,8 @@ watch(timeValue, (newValue) => {
:readonly="readonly"
inputmode="numeric"
pattern="[0-9.]*"
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
onblur="this.value = parseInt(this.value) ? this.value : 1"
oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
</div>

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

@ -1,6 +1,4 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
const props = defineProps({
placeholder: {
type: String,
@ -18,25 +16,25 @@ const props = defineProps({
type: String,
default: '1 Menit'
}
})
const handleInput = (e :any) => {
e.value = e.value.replace(/[^0-9.]/g, '')
const handleInput = (e: any) => {
e.target.value = e.target.value.replace(/[^0-9.]/g, '')
}
const handleBlur = (e :any) => {
e.value = e.value ? e.value + ' Menit' : ''
const handleBlur = (e: any) => {
e.target.value = e.target.value ? e.target.value + ' Menit' : ''
}
const handleFocus = (e:any) => {
e.value = e.value.replace(/[^0-9.]/g, '')
const handleFocus = (e: any) => {
e.target.value = e.target.value.replace(/[^0-9.]/g, '')
}
</script>
<template>
<div
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
<input
:value="props.value"
:value="props.value"
autocomplete="off"
type="text"
:placeholder="placeholder"
@ -44,9 +42,9 @@ const handleFocus = (e:any) => {
inputmode="numeric"
pattern="[0-9.]*"
:disabled="disabled"
@oninput="handleInput($event)"
@onblur="handleBlur($event)"
@onfocus="handleFocus($event)"
@input="handleInput($event)"
@blur="handleBlur($event)"
@focus="handleFocus($event)"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
</div>

84
src/components/InputText.vue
View File

@ -2,58 +2,58 @@
import { ref } from 'vue'
const props = defineProps({
type: {
type: String,
default: "text",
},
placeholder: {
type: String,
default: "",
},
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: false,
},
readonly: {
type: Boolean,
default: false,
},
className: {
type: String,
default: "",
}
type: {
type: String,
default: 'text'
},
placeholder: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
readonly: {
type: Boolean,
default: false
},
className: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:value'])
const updateValue = (event: Event) => {
const value = (event.target as HTMLInputElement).value;
emit('update:value', value)
const value = (event.target as HTMLInputElement).value
emit('update:value', value)
}
const inputType = ref(props.type)
const switchInputType = () => {
inputType.value = inputType.value == 'password' ? 'text' : 'password'
inputType.value = inputType.value == 'password' ? 'text' : 'password'
}
</script>
<template>
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
:disabled="disabled" :readonly="readonly"
:class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0']" />
<span @click="switchInputType" v-if="type == 'password'"
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
<svg width="20" height="20" viewBox="0 0 20 20"
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
<path
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
</svg>
</span>
</div>
</template>
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
:disabled="disabled" :readonly="readonly" :class="[
'w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0'
]" />
<span @click="switchInputType" v-if="type == 'password'"
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
<svg width="20" height="20" viewBox="0 0 20 20"
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
<path
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
</svg>
</span>
</div>
</template>

8
src/components/Pages/Anomali/Table_61.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
<Type4 @update:filters="(value) => filters = value" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
@ -107,8 +104,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'

7
src/components/Pages/Anomali/Table_63.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
<Type4 @update:filters="(value) => filters = value" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
@ -80,7 +77,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'

14
src/components/Pages/Anomali/Table_65.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => filters = value" />
</Filters>
<div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark">
@ -17,8 +14,8 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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" />
@ -85,8 +82,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'

6
src/components/Pages/Anomali/Table_66.vue
View File

@ -10,8 +10,8 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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" />
@ -35,8 +35,6 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'

24
src/components/Pages/Cico/Table_60.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
<Type1 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -19,20 +16,20 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
caption="Rata-rata RPT WO Gangguan"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
@ -42,8 +39,7 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'

139
src/components/Pages/Ctt/Table_67.vue
View File

@ -1,142 +1,58 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3
@update:filters="
(value) => {
filters = value
}
"
/>
<Type3 @update:filters="(value) => filters = value" />
</Filters>
<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"
:word-wrap-enabled="true"
>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
: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="170"
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_cc123"
data-type="number"
caption="a"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_pln_mobile"
data-type="number"
caption="b"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_comcen"
data-type="number"
caption="c"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_wo"
data-type="number"
caption="d=b+c"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="rekomendasi_sistem_mendatangkan_petugas"
data-type="number"
caption="e"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas"
data-type="number" caption="e" css-class="custom-table-column" />
</DxColumn>
<DxColumn
alignment="center"
caption="Diberikan ke Pelanggan"
css-class="custom-table-column"
>
<DxColumn
:width="150"
alignment="center"
data-field="total_wo_loket"
data-type="number"
caption="f"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="dlpd"
data-type="number"
caption="g"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="history_p2ti"
data-type="number"
caption="h"
css-class="custom-table-column"
/>
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
@ -172,6 +88,7 @@ const showPane = ref(true)
const dataDetail = ref<any>()
const data = ref<any[]>([])
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()

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

@ -1,11 +1,6 @@
<template>
<Filters @run-search="() => {
filterData(filters)
}" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="dataTable">
@ -71,132 +66,95 @@
<DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Pembuat Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Dialihkan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
<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>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Recovery:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Recovery Time:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko Awal:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" 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">
Posko Tujuan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Status:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Nama Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Alamat Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Pembuat Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Keterangan Pelapor:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Sumber Laporan:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Posko:
</h3>
<h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template>
@ -210,66 +168,96 @@ import {
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
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 { useDialogStore } from '@/stores/dialog'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#dataTable' }
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)
const runReset = ref(false)
const closeDetail = () => {
showDetail.value = false
}
const onExporting = (e: any) => {
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'F4',
format: 'F4'
})
// Add title on each page
const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
// Initialize page number
const pageNumber = ref(1);
const pageNumber = ref(1)
autoTable(doc, {
head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
head: [
[
'No Laporan',
'Pembuat Laporan',
'Tgl Lapor',
'Tgl Dialihkan',
'Tgl Response',
'Tgl Recovery',
'Durasi Response Time',
'Durasi Recovery Time',
'Posko Awal',
'Posko Tujuan',
'Status',
'IDPEL/NO METER',
'Nama Pelapor',
'Alamat Pelapor',
'No Telp Pelapor',
'Keterangan Pelapor',
'Sumber Lapor',
'Posko'
]
],
startY: 10,
body: data.value.map((item) =>
[item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
body: data.value.map((item) => [
item.no_laporan,
item.pembuat_laporan,
item.waktu_lapor,
item.waktu_dialihkan,
item.waktu_response,
item.waktu_recovery,
item.durasi_response_time,
item.durasi_recovery_time,
item.nama_posko_lama,
item.nama_posko_baru,
item.status_akhir,
item.idpel_nometer,
item.nama_pelapor,
item.alamat_pelapor,
item.no_telp_pelapor,
item.keterangan_pelapor,
item.media,
item.posko
]),
styles: {
fontSize: 6,
cellWidth: 'wrap'
},
}
})
doc.setProperties({
title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
});
pageNumber.value++; // Increment the pageNumber
subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
})
pageNumber.value++ // Increment the pageNumber
doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
// exportToPdf({
@ -289,7 +277,10 @@ const onExporting = (e: any) => {
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
saveAs(
new Blob([buffer], { type: 'application/octet-stream' }),
'DaftarGangguanDialihkanKePoskoLain.xlsx'
)
})
})
@ -332,15 +323,19 @@ const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -1,101 +1,245 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="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="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="in_process"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="persen_in_process"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_response"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_waktu_response_time"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="di_atas_sla_durasi_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="dibawah_sla_durasi_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_recovery"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_waktu_recovery_time"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="diatas_sla_durasi_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="dibawah_sla_durasi_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
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'
@ -146,69 +290,74 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
}
}
`
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
}
})
onError((queryError) => {
console.log(queryError)
})
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiJenisGangguanSE004
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
}
})
onError((queryError) => {
console.log(queryError)
})
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,324 +1,626 @@
<!-- Rekapitulasi Gangguan Per Posko -->
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type8 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" :group-index="0" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<Filters
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type8 @update:filters="(value) => (filters = value)" />
</Filters>
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
<DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
css-class="text-white" />
<DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
<DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
css-class="text-white" />
</DxSummary>
<DxColumn
:width="60"
alignment="center"
data-field="no"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
name="poskoGroup"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.sudahSelesai.jml"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="laporan.sudahSelesai.persen"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.belumSelesai.jml"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="laporan.belumSelesai.persen"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.rataRata"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.max"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.min"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.laporan.lebihSla"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.laporan.kurangSla"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.rataRata"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.max"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.min"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.laporan.lebihSla"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.laporan.kurangSla"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem
:show-in-group-footer="true"
column="laporan.total"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.sudahSelesai.jml"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.sudahSelesai.persen"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.belumSelesai.jml"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.belumSelesai.persen"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.total"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.max"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.min"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.total"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.max"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.min"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
/>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
show-in-column="laporan.total"
column="laporan.total"
css-class="text-white"
/>
<DxTotalItem
column="laporan.sudahSelesai.jml"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="laporan.sudahSelesai.persen"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="laporan.belumSelesai.jml"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="laporan.belumSelesai.persen"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.max"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.min"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.max"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.min"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { 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 { 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_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
query rekapitulasiGangguanPerPosko(
query rekapitulasiGangguanPerPosko(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
) {
rekapitulasiGangguanPerPosko(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_recovery
avg_durasi_response
id_posko
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
nama_posko
persen_inproses
persen_selesai
total
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
avg_durasi_recovery
avg_durasi_response
id_posko
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
nama_posko
persen_inproses
persen_selesai
total
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
var i = 1;
queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
const entry = {
no: Number(i++),
nama_posko: item.nama_posko,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai,
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses,
},
},
responseTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response,
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response,
},
},
recoveryTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery,
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery,
},
}
};
data.value = [...data.value, entry];
})
data.value = [...data.value];
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
var i = 1
queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
const entry = {
no: Number(i++),
nama_posko: item.nama_posko,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
data.value = [...data.value, entry]
})
data.value = [...data.value]
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
</script>
const filters = ref()
</script>

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

@ -1,203 +1,531 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type9 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type9 @update:filters="(value) => (filters = value)" />
</Filters>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :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
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="120" alignment="center" data-field="id_regu" caption="Kode"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="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="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="60"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-field="no"
data-type="number"
caption="No"
/>
<DxColumn
:width="120"
alignment="center"
data-field="id_regu"
caption="Kode"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="id_regu"
caption="Kode"
css-class="custom-table-column"
group-index="0"
v-if="filters.groupBy"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_regu"
caption="Nama Regu"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.sudahSelesai.jml"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="laporan.sudahSelesai.persen"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.belumSelesai.jml"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="laporan.belumSelesai.persen"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.rataRata"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.max"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.min"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.laporan.lebihSla"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.laporan.kurangSla"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.rataRata"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.max"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.min"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.laporan.lebihSla"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.laporan.kurangSla"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
show-in-column="laporan.total"
column="laporan.total"
css-class="text-white"
/>
<DxTotalItem
column="laporan.sudahSelesai.jml"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="laporan.sudahSelesai.persen"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="laporan.belumSelesai.jml"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="laporan.belumSelesai.persen"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.max"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.menit.min"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="responseTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.max"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.menit.min"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
<DxTotalItem
column="recoveryTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { 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 data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
query rekapitulasiGangguanPerRegu(
query rekapitulasiGangguanPerRegu(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
) {
rekapitulasiGangguanPerRegu(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
id_regu
nama_regu
avg_durasi_recovery
avg_durasi_response
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
nama_posko
total
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
id_regu
nama_regu
avg_durasi_recovery
avg_durasi_response
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
nama_posko
total
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerRegu;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
var i = 1
queryResult.data.rekapitulasiGangguanPerRegu.forEach((item: any) => {
const entry = {
no: Number(i++),
id_regu: item.id_regu,
nama_regu: item.nama_regu,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
data.value = [...data.value, entry]
})
data.value = [...data.value]
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>
const filters = ref({
groupBy: false
})
</script>

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

@ -1,203 +1,349 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type9 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type9 @update:filters="(value) => (filters = value)" />
</Filters>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :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
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="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="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal"
caption="Tanggal Lapor"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="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="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_response"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_recovery"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { 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()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
query rekapitulasiGangguanPerTanggal(
query rekapitulasiGangguanPerTanggal(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
) {
rekapitulasiGangguanPerTanggal(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
nama_posko
avg_durasi_recovery
avg_durasi_response
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
total
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
nama_posko
avg_durasi_recovery
avg_durasi_response
max_durasi_recovery
max_durasi_response
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
total
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
</script>
const filters = ref()
</script>

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

@ -1,53 +1,100 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible="loading" :enabled="true" />
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="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>
<DxColumn :width="170" alignment="center" data-field="total" caption="Total"
css-class="custom-table-column" />
</DxDataGrid>
</div>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Nama Media"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn
v-for="i in 31"
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn
:width="170"
alignment="center"
data-field="total"
caption="Total"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
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'
@ -56,42 +103,43 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
@ -148,36 +196,40 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
`
const { onResult, onError, loading, refetch } = 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: 0,
idUid: 0,
idUp3: 0
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,36 +1,85 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading"
v-model:visible="loading" :enabled="true" />
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :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
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
css-class="custom-table-column" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
</DxDataGrid>
</div>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
alignment="center"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
data-field="nama_posko"
caption="Nama Posko"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="posko_in"
caption="Posko IN"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="posko_out"
caption="Posko OUT"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -38,7 +87,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -46,104 +104,107 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanAlihPosko
(
query rekapitulasiGangguanAlihPosko(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanAlihPosko
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
rekapitulasiGangguanAlihPosko(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
id_posko
id_uid
id_up3
nama_posko
nama_uid
nama_up3
posko_in
posko_out
}
}`;
id_posko
id_uid
id_up3
nama_posko
nama_uid
nama_up3
posko_in
posko_out
}
}
`
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
</script>
const filters = ref()
</script>

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

@ -1,166 +1,271 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type6 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="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="waktu_lapor"
caption="Tgl Lapor" cell-template="data" />
<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="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" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="data" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type6 @update:filters="(value) => (filters = value)" />
</Filters>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible.sync="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
css-class="custom-table-column"
:width="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="waktu_lapor"
caption="Tgl Lapor"
cell-template="data"
/>
<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="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"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="showDetail"
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
@on-close="closeDetail"
>
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Laporan:
</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Lapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tanggal Response:
</h3>
<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?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Jumlah Lapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Status :
</h3>
<InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER:
</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Nama Pelapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Telp Pelapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Keterangan Pelapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Sumper Lapor:
</h3>
<InputText :readonly="true" :value="dataDetail?.sumber_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">
Posko:
</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.posko" class-name="flex-1 h-[56px]" />
</div>
</div>
</DetailDialog>
</DetailDialog>
</template>
<script setup lang="ts">
@ -168,96 +273,116 @@ import Filters from '@/components/Form/Filters.vue'
import Type6 from '@/components/Form/FiltersType/Type6.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
import InputText from '@/components/InputText.vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
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 dataDetail = ref<any>({})
const showDetail = ref(false)
const filters = ref()
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
const data = selectedRowsData[0]
dataDetail.value = data
}
const showData = () => {
showDetail.value = true
showDetail.value = true
}
const closeDetail = () => {
showDetail.value = false
showDetail.value = false
}
const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: Int!, $idUid: Int!, $idUp3: Int!) {
daftarGangguanMelaporLebihDariSatuKali(
minJmlLapor: $minJmlLapor
maxJmlLapor: $maxJmlLapor
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
query gangguan(
$minJmlLapor: Int!
$maxJmlLapor: Int!
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
alamat_pelapor
pembuat_laporan
durasi_response_time
durasi_recovery_time
idpel_nometer
jumlah_lapor
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
nama_posko
daftarGangguanMelaporLebihDariSatuKali(
minJmlLapor: $minJmlLapor
maxJmlLapor: $maxJmlLapor
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
pembuat_laporan
durasi_response_time
durasi_recovery_time
idpel_nometer
jumlah_lapor
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
nama_posko
}
}
}`;
`
const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
minJmlLapor: 1,
maxJmlLapor: 1,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
minJmlLapor: 1,
maxJmlLapor: 1,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ');
refetch({
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref()
</script>
</script>

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

@ -1,55 +1,277 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type7 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
:column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type7 @update:filters="(value) => (filters = value)" />
</Filters>
<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="waktu_lapor"
caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
caption="Referensi Marking" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="data"
/>
</DxDataGrid>
<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="waktu_lapor"
caption="Tgl Lapor"
cell-template="data"
/>
<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="waktu_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
@ -57,40 +279,71 @@ import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
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 filterData = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiResponseTime : minTime ? minTime : 0,
maxDurasiResponseTime : maxTime ? maxTime : 1,
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanResponseTime;
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
const dataDetail = ref<any>({})
const showDetail = ref(false)
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
dataDetail.value = data
}
const showData = () => {
showDetail.value = true
}
const closeDetail = () => {
showDetail.value = false
}
const filterData = (params: any) => {
const { minTime, maxTime, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
minDurasiResponseTime: minTime ? minTime : 0,
maxDurasiResponseTime: maxTime ? maxTime : 1,
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanResponseTime
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
query daftarGangguanResponseTime(
query daftarGangguanResponseTime(
$dateFrom: Date!
$dateTo: Date!
$minDurasiResponseTime: Int!
@ -98,42 +351,43 @@ query daftarGangguanResponseTime(
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
) {
daftarGangguanResponseTime(
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiResponseTime: $minDurasiResponseTime
maxDurasiResponseTime: $maxDurasiResponseTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiResponseTime: $minDurasiResponseTime
maxDurasiResponseTime: $maxDurasiResponseTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
is_marking
no_laporan
no_telp_pelapor
nama_posko
status_akhir
waktu_lapor
waktu_recovery
waktu_response
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
is_marking
no_laporan
no_telp_pelapor
nama_posko
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}`;
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiResponseTime: 1, //menit
maxDurasiResponseTime: 1,// menit
posko: 0,
idUid: 0,
idUp3: 0,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiResponseTime: 1, //menit
maxDurasiResponseTime: 1, // menit
posko: 0,
idUid: 0,
idUp3: 0
})
const filters = ref()
</script>
</script>

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

@ -1,98 +1,219 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type7 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type7 @update:filters="(value) => (filters = value)" />
</Filters>
<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="waktu_lapor"
caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="is_marking"
caption="Referensi Marking" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed=""
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
</DxDataGrid>
</div>
<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="waktu_lapor"
caption="Tgl Lapor"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="is_marking"
caption="Referensi Marking"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
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 filterData = (params: any) => {
const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanRecoveryTime;
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError(error => {
console.log(error)
})
const { minTime, maxTime, posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: minTime ? minTime : 0,
maxDurasiRecoveryTime: maxTime ? maxTime : 1,
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanRecoveryTime
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
query daftarGangguanRecoveryTime(
query daftarGangguanRecoveryTime(
$dateFrom: Date!
$dateTo: Date!
$minDurasiRecoveryTime: Int!
@ -100,44 +221,44 @@ query daftarGangguanRecoveryTime(
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
) {
daftarGangguanRecoveryTime(
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiRecoveryTime: $minDurasiRecoveryTime
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
dateFrom: $dateFrom
dateTo: $dateTo
minDurasiRecoveryTime: $minDurasiRecoveryTime
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
is_marking
no_telp_pelapor
nama_posko
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}`;
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
is_marking
no_telp_pelapor
nama_posko
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: 1, //menit
maxDurasiRecoveryTime: 1,// menit
posko: 0,
idUid: 0,
idUp3: 0,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: 1, //menit
maxDurasiRecoveryTime: 1, // menit
posko: 0,
idUid: 0,
idUp3: 0
})
const filters = ref()
</script>
</script>

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

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

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

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

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

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

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

@ -1,204 +1,399 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<Filters
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
caption="Selesai"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="In Progress"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_dispatch"
data-type="number"
caption="Rata-Rata"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_dispatch"
data-type="number"
caption="Max"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_dispatch"
data-type="number"
caption="Min"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_dispatch"
data-type="number"
caption=">SLA"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_dispatch"
data-type="number"
caption="≤SLA"
:allow-resizing="false"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
:allow-resizing="false"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
:allow-resizing="false"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
:allow-resizing="false"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.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 { computed, onMounted, ref, watch } from 'vue'
import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { ref } from 'vue'
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 { 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_REKAPITULASI_GANGGUAN_ALL = gql`
query rekapitulasiAllGangguan(
query rekapitulasiAllGangguan(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
) {
rekapitulasiAllGangguan(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
nama_posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
nama_posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value, {
...item,
}];
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
]
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const filters = ref();
</script>
const filters = ref()
</script>

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

@ -1,144 +1,363 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxGroupPanel :visible="true" />
<DxGrouping :auto-expand-all="true" />
<Filters
:report-button="true"
@reset-form="dataReal = []"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" name="jenisGangguanGroup" data-field="jenisGangguan"
caption="Jenis Gangguan" css-class="custom-table-column" :group-index="0" />
<DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
caption="Jml" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
caption="%" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
caption="Total" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
caption="Min" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
caption=">SLA" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="dataReal"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxGroupPanel :visible="true" />
<DxGrouping :auto-expand-all="true" />
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
display-format="{0}" />
<DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
display-format="{0}" />
</DxSummary>
</DxDataGrid>
</div>
<DxColumn
:width="60"
alignment="center"
data-field="no"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="kode"
caption="Kode"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
name="jenisGangguanGroup"
data-field="jenisGangguan"
caption="Jenis Gangguan"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jenisGangguan"
caption="Jenis Gangguan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.sudahSelesai.jml"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="laporan.sudahSelesai.persen"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="laporan.belumSelesai.jml"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="laporan.belumSelesai.persen"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.rataRata"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.max"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.menit.min"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.laporan.lebihSla"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="responseTime.laporan.kurangSla"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.rataRata"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.max"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.menit.min"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.laporan.lebihSla"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="recoveryTime.laporan.kurangSla"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
<DxGroupItem
:show-in-group-footer="true"
column="laporan.total"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.sudahSelesai.jml"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.sudahSelesai.persen"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.belumSelesai.jml"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="laporan.belumSelesai.persen"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.total"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.max"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.menit.min"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="responseTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.total"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.rataRata"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.max"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.menit.min"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.laporan.lebihSla"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="recoveryTime.laporan.kurangSla"
summary-type="sum"
display-format="{0}"
/>
</DxSummary>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxGroupPanel,
DxGrouping,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection,
DxSummary
DxColumn,
DxColumnFixing,
DxExport,
DxGroupItem,
DxGroupPanel,
DxGrouping,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection,
DxSummary
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -147,6 +366,7 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import gql from 'graphql-tag'
import { useQuery } from '@vue/apollo-composable'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -168,138 +388,139 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_recovery
total_dibawah_sla_response
total_dibawah_sla_dispatch
total_inproses
total_selesai
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
let no = 0
queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
dataReal.value = [
...dataReal.value,
{
no: ++no,
kode: item.tipe_permasalahan,
jenisGangguan: item.tipe_permasalahan,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: item.avg_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.avg_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
]
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((queryError) => {
console.log(queryError)
})
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
let no = 0
queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
dataReal.value = [
...dataReal.value,
{
no: ++no,
kode: item.tipe_permasalahan,
jenisGangguan: item.tipe_permasalahan,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai
},
belumSelesai: {
jml: item.total_inproses,
persen: item.persen_inproses
}
},
responseTime: {
menit: {
total: item.avg_durasi_response,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response
}
},
recoveryTime: {
menit: {
total: item.avg_durasi_recovery,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery
}
}
}
]
})
}
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((queryError) => {
console.log(queryError)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,76 +1,182 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
</DxDataGrid>
</div>
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="pembuat_laporan"
caption="Pembuat Laporan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_dialihkan"
caption="Tgl Dialihkan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_unit_lama"
caption="Unit Asal"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -79,42 +185,44 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
@ -133,58 +241,68 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_unit_baru
id_unit_lama
idpel_nometer
keterangan_pelapor
media
nama_pelapor
nama_unit_baru
nama_unit_lama
no_laporan
no_telp_pelapor
pembuat_laporan
status_akhir
waktu_dialihkan
waktu_lapor
waktu_recovery
waktu_response
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_unit_baru
id_unit_lama
idpel_nometer
keterangan_pelapor
media
nama_pelapor
nama_unit_baru
nama_unit_lama
no_laporan
no_telp_pelapor
pembuat_laporan
status_akhir
waktu_dialihkan
waktu_lapor
waktu_recovery
waktu_response
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
const { onResult, onError, loading, refetch } = useQuery(
GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
}
)
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,81 +1,294 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type10 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type10 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid>
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<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?.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?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type10 from '@/components/Form/FiltersType/Type10.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -84,42 +297,54 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
const closeDetail = () => {
showDetail.value = false
}
e.cancel = true
}
const showData = () => {
showDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const data = ref<any[]>([])
@ -142,63 +367,66 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
jumlah_lapor
keterangan_pelapor
media
nama_pelapor
nama_unit
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
jumlah_lapor
keterangan_pelapor
media
nama_pelapor
nama_ulp
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
minJmlLapor: 1,
maxJmlLapor: 100,
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
refetch({
minJmlLapor: minJmlLapor,
maxJmlLapor: maxJmlLapor,
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
refetch({
minJmlLapor: minJmlLapor,
maxJmlLapor: maxJmlLapor,
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
console.log(data.value[0])
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,74 +1,272 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid>
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<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?.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?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -77,42 +275,54 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
const closeDetail = () => {
showDetail.value = false
}
e.cancel = true
}
const showData = () => {
showDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const data = ref<any[]>([])
@ -135,55 +345,63 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
nama_unit
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
nama_ulp
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiResponseTime: 0,
maxDurasiResponseTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3,maxTime,minTime } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiResponseTime: minTime,
maxDurasiResponseTime:maxTime,
idUlp: ulp ? ulp.id :0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanResponseTime
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiResponseTime: 0,
maxDurasiResponseTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3, maxTime, minTime } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
minDurasiResponseTime: minTime,
maxDurasiResponseTime: maxTime,
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanResponseTime
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,74 +1,273 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type11 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid>
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<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?.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?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -77,42 +276,54 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
const closeDetail = () => {
showDetail.value = false
}
e.cancel = true
}
const showData = () => {
showDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const data = ref<any[]>([])
@ -135,59 +346,62 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
nama_unit
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
alamat_pelapor
durasi_recovery_time
durasi_response_time
idpel_nometer
keterangan_pelapor
media
nama_pelapor
nama_ulp
no_laporan
no_telp_pelapor
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
minDurasiRecoveryTime: 0,
maxDurasiRecoveryTime: 0,
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3,minTime,maxTime } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: minTime,
maxDurasiRecoveryTime: maxTime,
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanRecoveryTime
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3, minTime, maxTime } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
minDurasiRecoveryTime: minTime,
maxDurasiRecoveryTime: maxTime,
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanRecoveryTime
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,81 +1,280 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" />
<DxColumn :width="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="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
css-class="custom-table-column" />
</DxDataGrid>
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<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?.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?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -84,42 +283,54 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
const closeDetail = () => {
showDetail.value = false
}
e.cancel = true
}
const showData = () => {
showDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const data = ref<any[]>([])
@ -141,51 +352,56 @@ const GET_DATA = gql`
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_ulp
nama_pelapor
no_laporan
no_telp_pelapor
idUlp
status_akhir
waktu_lapor
waktu_recovery
waktu_response
}
}
`
const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,77 +1,287 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="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="120" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" />
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
css-class="custom-table-column" />
<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="media" caption="Sumber Lapor"
css-class="custom-table-column" />
<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>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_media"
caption="Tgl Media"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_media"
caption="Keterangan Media"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
<InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Media:</h3>
<InputText :readonly="true" :value="dataDetail?.waktu_media" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1 h-[56px]"
/>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -80,42 +290,54 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
const closeDetail = () => {
showDetail.value = false
}
e.cancel = true
}
const showData = () => {
showDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
dataDetail.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
}
const data = ref<any[]>([])
@ -126,7 +348,6 @@ const GET_DATA = gql`
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$media: String!
) {
daftarKeluhanBerdasarkanMedia(
dateFrom: $dateFrom
@ -134,19 +355,19 @@ const GET_DATA = gql`
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
media: $media
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
waktu_media
keterangan_media
waktu_lapor
nama_pelapor
no_laporan
no_telp_pelapor
idUlp
nama_ulp
status_akhir
waktu_recovery
waktu_response
@ -155,36 +376,40 @@ const GET_DATA = gql`
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const filters = ref();
const filters = ref()
</script>

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

@ -1,74 +1,191 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" />
<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 :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" />
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Contact Center"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="UI Dist."
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="ULP"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
/>
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
css-class="custom-table-column" />
</DxDataGrid>
</div>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Tlp Pelapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="APKT Status"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Created By"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Tgl Penyelesaian"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Lapor Ulang"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Issue Type"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Sub Issue Type"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -77,113 +194,116 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
const showPane = ref(true);
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query daftarKeluhanDiselesaikanCC123
(
query daftarKeluhanDiselesaikanCC123(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
) {
daftarKeluhanDiselesaikanCC123
(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
daftarKeluhanDiselesaikanCC123(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
) {
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
idUlp
status_akhir
waktu_recovery
waktu_response
}
}
alamat_pelapor
durasi_recovery_time
durasi_response_time
id_keluhan
idpel_nometer
keterangan_pelapor
media
nama_pelapor
no_laporan
no_telp_pelapor
idUlp
status_akhir
waktu_recovery
waktu_response
}
}
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0,
media: 'Twitter'
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0,
media: 'Twitter'
})
const filters = ref();
const filters = ref()
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
const media = params.media ? params.media.id : ''
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media: media
})
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
const media = params.media ? params.media.id : ''
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
media: media
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
</script>

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

@ -1,64 +1,219 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type3 @update:filters="(value) => filters = value" />
</Filters>
<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">
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<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="170" alignment="center" data-field="idUlp" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
cell-template="data" />
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="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" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption="> SLA" css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" 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" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
css-class="custom-table-column" />
css-class="custom-table-column" cell-template="data" />
</DxColumn>
<template #data="{ data }">
<span class="cursor-pointer" @click="showDialog()">
{{ data.text }}
</span>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
@on-close="closeDetailDialog">
<div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
<div class="flex flex-1 p-4 bg-white rounded-xl">
<div class="w-full">
<!-- <DxDataGrid class="w-full" :data-source="dataDetail" :column-auto-width="true" :show-column-lines="true"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onDataDetailSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="60" alignment="center" data-field="" caption="No" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
css-class="custom-table-column" />
</DxDataGrid> -->
</div>
</div>
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Laporan:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Tgl Lapor:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Dalam Proses Bidang:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Selesai Bidang Unit:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Durasi Response Time:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Status:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
IDPEL/NO METER::
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Nama Pelapor:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Alamat Pelapor:
</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
No Telp Pelapor:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Keterangan Pelapor:
</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Rayon:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Uraian:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
<div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">
Response Pelanggan:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div>
</div>
</div>
</DetailDialog>
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
@ -68,6 +223,7 @@ import {
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxScrolling,
DxSearchPanel,
@ -84,8 +240,29 @@ const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const dataDetail = ref<any>()
const showDetail = ref(false)
const dataSelected = ref<any>()
const dataDetailSelected = ref<any>()
const showDialogDetail = ref(false)
const dataDetail = ref<any[]>([])
const closeDetailDialog = () => {
showDialogDetail.value = false
}
const showDialog = () => {
showDialogDetail.value = true
}
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
dataSelected.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onDataDetailSelectionChanged = ({ selectedRowsData }: any) => {
dataDetailSelected.value = selectedRowsData[0]
console.log(selectedRowsData[0])
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -115,11 +292,6 @@ const onExporting = (e: any) => {
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_DATA = gql`
query rekapitulasiKeluhanAll
@ -138,55 +310,49 @@ query rekapitulasiKeluhanAll
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
idUlp
id_ulp
nama_ulp
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
}
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`
const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filters = ref();
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0,
idUid: 0,
idUp3: 0
})
const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0})
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanAll
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type13 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -13,29 +10,29 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
: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"
<DxColumn :width="170" alignment="center" data-field="fungsi_bidang" 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="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="totalSelesai" 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="persenSelesai" 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="totalInProcess" 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="persenInProcess" data-type="number" caption="%"
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -43,17 +40,17 @@
<DxColumn alignment="center" caption="Hari" 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="avgDurasiResponse" data-type="number"
<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="maxDurasiResponse" data-type="number"
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
caption="Max" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number"
<DxColumn :width="150" alignment="center" data-field="max_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="totalDiatasSlaResponse" data-type="number"
<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="totalDibawahSlaResponse" data-type="number"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -61,17 +58,17 @@
<DxColumn alignment="center" caption="Hari" 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="avgDurasiPenyelesaian" data-type="number"
<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="maxDurasiPenyelesaian" data-type="number"
<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="minDurasiPenyelesaian" data-type="number"
<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="totalDiatasSlaPenyelesaian" data-type="number"
<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="totalDibawahSlaPenyelesaian" data-type="number"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -158,24 +155,22 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
avgDurasiPenyelesaian
avgDurasiResponse
fungsiBidang
maxDurasiPenyelesaian
maxDurasiResponse
minDurasiPenyelesaian
minDurasiResponse
persenInProcess
persenSelesai
fungsi_bidang
total
totalDiatasSlaPenyelesaian
totalDiatasSlaResponse
totalDibawahSlaPenyelesaian
totalDibawahSlaResponse
totalDurasiPenyelesaian
totalDurasiResponse
totalInProcess
totalSelesai
total_selesai
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}
`
@ -190,13 +185,14 @@ const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0})
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
<Type3 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -13,15 +10,15 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
<DxColumn :width="170" alignment="center" data-field="tipe_keluhan" 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="total" data-type="number" caption="Total"
@ -71,7 +68,7 @@
<DxColumn alignment="center" caption="Laporan" 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_recovery" data-type="number"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -150,30 +147,25 @@ query rekapitulasiKeluhanPerJenisKeluhan
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
tipe_keluhan
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
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`;
const { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUlp: 0,
@ -184,13 +176,14 @@ const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0})
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type13 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -13,29 +10,29 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
<DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok 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>
@ -43,36 +40,36 @@
<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="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="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>
@ -83,7 +80,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type13 from '@/components/Form/FiltersType/Type13.vue'
import { ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -150,30 +147,25 @@ query rekapitulasiKeluhanPerKelompokKeluhan
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tipe_permasalahan
kelompok
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
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}`;
const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUlp: 0,
@ -184,20 +176,21 @@ const filters = ref();
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params
const { idUlp, uid, up3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id :0,
idUp3: up3? up3.id:0})
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
;
}
console.log(queryResult.data)
console.log(queryResult.loading)

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type13 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@ -21,7 +18,7 @@
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
@ -156,29 +153,22 @@ const GET_DATA = gql`
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
tanggal_lapor
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
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}
`

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type8 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -21,7 +18,7 @@
<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="idUlp" caption="Unit" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
@ -155,29 +152,23 @@ const GET_DATA = gql`
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
idUlp
id_ulp
nama_ulp
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
persen_selesai
total_inproses
persen_inproses
avg_durasi_response
min_durasi_response
max_durasi_response
total_dibawah_sla_response
total_diatas_sla_response
avg_durasi_recovery
min_durasi_recovery
max_durasi_recovery
total_dibawah_sla_recovery
total_diatas_sla_recovery
}
}
`

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => {
filters = value
}
" />
<Type3 @update:filters="(value) => filters = value" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type8 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

17
src/components/Pages/Material/Table_68.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => {
filters = value
}
" />
<Type14 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@ -11,8 +8,8 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -48,9 +45,9 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue';
import { Type14 } from '@/components/Form/FiltersType';
import { useQuery } from '@vue/apollo-composable';
@ -98,10 +95,10 @@ const filterData = (params: any) => {
const { posko, idUid, idUp3 } = params
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
})
onResult((queryResult) => {

28
src/components/Pages/Material/Table_69.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => {
filters = value
}
" />
<Type14 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@ -11,8 +8,8 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -24,7 +21,8 @@
caption="Kode Material" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
caption="Nama Material" />
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan"
caption="Satuan" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
caption="Sumber Material" />
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
@ -39,11 +37,11 @@
<script setup lang="ts">
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType';
import Filters from '@/components/Form/Filters.vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -105,7 +103,7 @@ const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMa
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
idUid: 0,
idUp3: 0,
posko: ''
posko: 0
})
const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
@ -114,10 +112,10 @@ const filterData = (params: any) => {
refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
})
onResult((queryResult) => {
if (queryResult.data != undefined) {

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

@ -1,14 +1,11 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<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"
: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" />
@ -19,7 +16,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-type="text" data-field="nama_posko" caption="Nama Unit"
<DxColumn 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">
@ -32,7 +29,7 @@
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
:caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@ -104,13 +101,13 @@ const onExporting = (e: any) => {
e.cancel = true
}
}
const tahunSekarang = ref(new Date().getFullYear())
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const MONALISAJUMLAHKALIGANGGUAN = gql`
query DaftarMonalisaJumlahKaliGangguan(
$regional: String
$posko: String
$regional: Int
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -135,8 +132,8 @@ const MONALISAJUMLAHKALIGANGGUAN = gql`
}
`
const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
regional: '',
posko: '',
regional: 0,
posko: 0,
idUid: 0,
idUp3: 0,
bulan: bulanSekarang.value,
@ -144,14 +141,14 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
})
const filterData = (params: any) => {
const {regional, posko, idUid, idUp3, bulan, tahun} = params;
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
bulanSekarang.value = bulan.id;
tahunSekarang.value = tahun.id;
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value
@ -175,5 +172,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
onMounted(() => {
console.log(bulanSekarang.value)
});
const filters= ref();
const filters = ref();
</script>

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

@ -1,15 +1,12 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@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" />
@ -19,8 +16,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -32,7 +28,7 @@
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
:caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@ -46,8 +42,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -64,7 +59,7 @@ 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'
const tahunSekarang = ref(new Date().getFullYear())
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
@ -109,7 +104,7 @@ const onExporting = (e: any) => {
const monalisaDispatchingTimeGangguan = gql`
query DaftarmonalisaDispatchingTimeGangguan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -148,7 +143,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
@ -158,10 +153,7 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaDispatchingTimeGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
...data.value, { ...item }
]
})
}

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

@ -1,15 +1,12 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@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" />
@ -19,8 +16,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -46,8 +42,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -55,12 +50,13 @@ 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'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { getMonthName } from '@/utils/texts'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
@ -70,7 +66,7 @@ const dataDetail = ref<any>()
const showDetail = ref(false)
const monalisaRecoveryTimeGangguan = gql`
query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
monalisaRecoveryTimeGangguan(
regional:$regional
posko: $posko
@ -90,7 +86,7 @@ const monalisaRecoveryTimeGangguan = gql`
}
`;
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
regional: "",
regional: 0,
posko: 0,
idUid: 0,
idUp3: 0,
@ -105,7 +101,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,15 +1,12 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@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" />
@ -19,8 +16,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -46,8 +42,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -80,7 +75,7 @@ const showDetail = ref(false)
const monalisaResponseTimeKeluhan = gql`
query DaftarmonalisaResponseTimeKeluhan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -119,7 +114,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -19,8 +16,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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">
@ -82,8 +78,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -100,11 +95,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -115,7 +111,7 @@ const showDetail = ref(false)
const monalisaJumlahDurasiRptRctGangguan = gql`
query DaftarmonalisaJumlahDurasiRptRctGangguan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -158,7 +154,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
@ -168,10 +164,7 @@ const filterData = (params: any) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
data.value = [
...data.value,
{
...item
}
...data.value, { ...item }
]
})
}
@ -179,9 +172,9 @@ const filterData = (params: any) => {
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onError((error) => {
console.log(error)
})
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -36,8 +33,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -54,11 +50,11 @@ 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'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -69,7 +65,7 @@ const showDetail = ref(false)
const monalisaGangguanPerJenisGangguan = gql`
query DaftarmonalisaGangguanPerJenisGangguan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -103,7 +99,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,26 +1,22 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -32,7 +28,7 @@
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
:caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@ -46,8 +42,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -64,12 +59,13 @@ 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'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { getMonthName } from '@/utils/texts'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -80,7 +76,7 @@ const showDetail = ref(false)
const monalisaRekapitulasiLaporUlangGangguan = gql`
query DaftarmonalisaRekapitulasiLaporUlangGangguan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -119,7 +115,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,26 +1,22 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -32,7 +28,7 @@
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
:caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@ -46,8 +42,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -64,12 +59,13 @@ 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'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { getMonthName } from '@/utils/texts'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -80,7 +76,7 @@ const showDetail = ref(false)
const monalisaRekapitulasiEnsGangguan = gql`
query DaftarmonalisaRekapitulasiEnsGangguan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -113,14 +109,14 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
idUp3: 0
})
const filterData = (params: any) => {
const {regional, posko, idUid, idUp3, bulan, tahun} = params;
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
bulanSekarang.value = bulan.id;
tahunSekarang.value = tahun.id;
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023

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

@ -1,14 +1,12 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@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" @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" />
@ -34,7 +32,7 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import {ref} from 'vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -51,11 +49,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
@ -66,7 +65,7 @@ const showDetail = ref(false)
const monalisaGangguanBelumSelesai = gql`
query DaftarmonalisaGangguanBelumSelesai(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -81,9 +80,9 @@ const monalisaGangguanBelumSelesai = gql`
tahun: $tahun
) {
gangguan
informasi
nama_posko
total
informasi
nama_posko
total
}
}
`
@ -103,7 +102,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,25 +1,22 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -31,7 +28,7 @@
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
:caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
@ -46,7 +43,6 @@
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
@ -92,13 +88,13 @@ const onExporting = (e: any) => {
}
const tahunSekarang = ref(new Date().getFullYear())
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const MONALISAJUMLAHKALIKELUHAN = gql`
query DaftarMonalisaJumlahKaliKeluhan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -132,14 +128,14 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUH
})
const filterData = (params: any) => {
const {regional, posko, idUid, idUp3, bulan, tahun} = params;
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
bulanSekarang.value = bulan.id;
tahunSekarang.value = tahun.id;
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value
@ -163,5 +159,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
onMounted(() => {
console.log(bulanSekarang.value)
});
const filters= ref();
const filters = ref();
</script>

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

@ -1,15 +1,12 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
@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" />
@ -19,8 +16,7 @@
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -98,7 +94,7 @@ const onExporting = (e: any) => {
const monalisaDispatchingTimeKeluhan = gql`
query DaftarmonalisaDispatchingTimeKeluhan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -137,7 +133,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,25 +1,22 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -95,7 +92,7 @@ const onExporting = (e: any) => {
}
}
const monalisaRecoveryTimeKeluhan = gql`
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
monalisaRecoveryTimeKeluhan(
regional:$regional
posko: $posko
@ -115,7 +112,7 @@ const monalisaRecoveryTimeKeluhan = gql`
}
`;
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
regional: "",
regional: 0,
posko: 0,
idUid: 0,
idUp3: 0,
@ -130,7 +127,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,25 +1,23 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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="nama_posko" 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">
@ -135,7 +133,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const monalisaJumlahDurasiRptRctKeluhan = gql`
query DaftarmonalisaJumlahDurasiRptRctKeluhan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -166,42 +164,42 @@ const monalisaJumlahDurasiRptRctKeluhan = gql`
}
`
const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
bulan: 10,
tahun: 2023,
regional: '',
posko: '',
idUid: 0,
idUp3: 0
})
const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
const { regional, posko, idUid, idUp3, bulan, tahun } = params;
refetch({
regional: regional,
posko: posko ? posko.id : "",
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctKeluhan.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)
})
refetch({
regional: regional,
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctKeluhan.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 filters = ref()

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

@ -1,28 +1,31 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@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" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" />
<DxColumn :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan" 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_keluhan" caption="%" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan"
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_keluhan" caption="%"
css-class="custom-table-column" />
</DxDataGrid>
</div>
@ -85,7 +88,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const monalisaKeluhanPerJenisKeluhan = gql`
query DaftarmonalisaKeluhanPerJenisKeluhan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -119,7 +122,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,25 +1,22 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn 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="jumlah_bulan" data-type="number"
@ -102,7 +99,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const monalisaRekapitulasiLaporUlangKeluhan = gql`
query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -141,7 +138,7 @@ const filterData = (params: any) => {
tahunLalu.value = tahun.id - 1;
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,79 +1,29 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2
@update:filters="
(value) => {
filters = value
}
"
/>
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:data-source="data"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@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" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<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
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="informasi"
data-type="number"
caption="Informasi"
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="keluhan" data-type="number" caption="Keluhan"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
</div>
@ -144,7 +94,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const monalisaRekapitulasiKeluhanBelumSelesai = gql`
query DaftarmonalisaRekapitulasiKeluhanBelumSelesai(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -178,7 +128,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@ -155,7 +152,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const penurunanJumlahKomplainBulanan = gql`
query DaftarpenurunanJumlahKomplainBulanan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -205,7 +202,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,53 +1,50 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
caption="Feb 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
caption="SLA (Menit)" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
caption="Feb 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
caption="SLA (Jam)" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -71,36 +68,36 @@ const showPane = ref(true)
const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const tahunSekarang = ref(new Date().getFullYear())
const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
@ -110,7 +107,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const agingComplaintBulanan = gql`
query DaftaragingComplaintBulanan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -148,7 +145,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,43 +1,40 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
caption="Tidak Terencana" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -61,42 +58,42 @@ const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const agingComplaintBulanan = gql`
query DaftaragingComplaintBulanan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -132,7 +129,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,45 +1,42 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
css-class="custom-table-column" />
<DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
caption="Komplain Pelanggan %" css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -63,42 +60,42 @@ const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -134,7 +131,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,52 +1,47 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<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"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<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">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
css-class="custom-table-column" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
caption="Feb 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
caption="SLA (Menit)" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
caption="Feb 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
caption="SLA (Jam)" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -70,32 +65,32 @@ const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
@ -105,7 +100,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const penurunanJumlahKomplainKumulatif = gql`
query DaftarpenurunanJumlahKomplainKumulatif(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -155,7 +150,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,53 +1,48 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<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"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<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">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number"
caption="Feb 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number"
caption="SLA (Menit)" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number"
caption="Feb 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number"
caption="SLA (Jam)" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number"
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -71,42 +66,42 @@ const data = ref<any[]>([])
const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const agingComplaintKumulatif = gql`
query DaftaragingComplaintKumulatif(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -144,7 +139,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,43 +1,40 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<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"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<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"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number"
caption="Tidak Terencana" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
css-class="custom-table-column" />
</DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -62,42 +59,42 @@ const dataDetail = ref<any>()
const showDetail = ref(false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -133,7 +130,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

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

@ -1,45 +1,40 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<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"
:word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" />
</Filters>
<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">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
<DxColumnFixing :enabled="true" />
<DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
css-class="custom-table-column" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total"
data-type="number" caption="Total Gangguan" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
data-type="number" caption="Jan 2020" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total"
data-type="number" caption="Total Keluhan" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number"
caption="Komplain Pelanggan %" css-class="custom-table-column" />
</DxDataGrid>
</div>
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
@ -64,42 +59,42 @@ const showDetail = ref(false)
const data = ref<any[]>([])
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
if (e.format === 'pdf') {
const doc = new jsPDF()
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToPdf({
jsPDFDocument: doc,
component: e.component,
indent: 5,
}).then(() => {
doc.save(`.pdf`)
})
} else {
const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees')
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
})
})
e.cancel = true
}
e.cancel = true
}
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
const data = selectedRowsData[0]
console.log(data)
}
const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
$regional: String
$posko: String
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
@ -135,7 +130,7 @@ const filterData = (params: any) => {
refetch({
regional: regional,
posko: posko ? posko.id : "",
posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10,

17
src/components/Pages/PencarianData/Table_71.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type15 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type15 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@ -11,10 +8,10 @@
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
:show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@ -45,7 +42,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { Type15 } from '@/components/Form/FiltersType';
import Filters from '@/components/Form/Filters.vue';
const position = { of: '#data' }

14
src/components/Pages/Transaksi/Table_70.vue
View File

@ -1,9 +1,6 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type17 @update:filters="(value) => {
filters = value
}
" />
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type17 @update:filters="(value) => filters = value" />
</Filters>
<div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
@ -13,8 +10,8 @@
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" />
<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" />
@ -38,8 +35,7 @@
</template>
<script setup lang="ts">
import { onMounted,ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'

2
src/components/Select.vue
View File

@ -29,8 +29,6 @@ const selected = ref(data.value[0].id)
watch(
() => props.selected,
(value: any) => {
console.log('value', value)
console.log('aaaaaaaaaaaaaaaa')
selected.value = value.id
}
)

12
src/router/index.ts
View File

@ -1,7 +1,6 @@
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import HomeView from '@/views/HomeView.vue'
import TestView from '@/views/TestView.vue'
import LoginView from '@/views/LoginView.vue'
import NotFoundView from '@/views/NotFoundView.vue'
import WelcomePage from '@/components/Pages/Welcome.vue'
@ -532,7 +531,7 @@ export const routes: RouteRecordRaw[] = [
},
{
path: 'check-in-out',
name: 'Check In OutCheck In Dan Check Out',
name: 'Check In Dan Check Out',
children: [
{
path: 'laporan',
@ -696,11 +695,6 @@ export const routes: RouteRecordRaw[] = [
name: 'Login',
component: LoginView
},
{
path: '/playground',
name: 'Playground',
component: TestView
},
{
path: '/404',
name: 'Not Found',
@ -788,8 +782,8 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
fullPath === '/home/'
? ''
: fullPath.includes('/home/')
? fullPath.replace('/home/', '')
: fullPath,
? fullPath.replace('/home/', '')
: fullPath,
name: r.name,
component: r.component
} as RouteRecordRaw

20
src/utils/graphql.ts
View File

@ -2,12 +2,10 @@
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
export const apolloClient = () => {
const httpLink = createHttpLink({
uri: 'http://10.1.50.173:32180/graphql',
credentials: 'include', // Include credentials for cross-origin requests
});
const httpLink = createHttpLink({
uri: import.meta.env.VITE_APP_GRAPHQL_ENDPOINT,
credentials: 'include' // Include credentials for cross-origin requests
})
const apolloClient = new ApolloClient({
cache: new InMemoryCache(),
@ -17,9 +15,9 @@ export const apolloClient = () => {
'Accept-Encoding': 'gzip, deflate',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
'Content-Type': 'application/json',
'Content-Type': 'application/json'
// Add other headers as needed
},
});
return apolloClient;
}
}
})
return apolloClient
}

15
src/utils/network.ts
View File

@ -1,8 +1,8 @@
//deploy vm
import axios from 'axios'
const url = 'http://10.1.50.173:32181'
const url = import.meta.env.VITE_APP_REST_ENDPOINT
const instance = axios.create({
// baseURL: 'http://192.168.1.84:32180'
baseURL: url
})
@ -14,4 +14,13 @@ const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional, getRegional }
export {
getUid,
getUp3,
getPosko,
getUlp,
getMedia,
getJenisTransaksi,
getUidRegional,
getRegional
}

33
src/views/TestView.vue
View File

@ -1,33 +0,0 @@
<script setup lang="ts">
import { RichSelect } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref('Option 1')
const options = [
{ value: 'Option 1', text: 'One Option' },
{ value: 'Option 2', text: 'Two Options' },
{ value: [{ anotherObject: true, nested: 'deep' }], text: 'Complex Object' },
{
value: 'seprator',
text: 'A sperator can be usefull',
children: [
{ value: 'Option 4', text: '4th Option' },
{ value: 'Option 5', text: '5th Option' }
]
}
]
</script>
<template>
<div class="container bg-red-300 m-auto p-5">
<div class="w-full">
<RichSelect
v-model="value"
name="test"
:options="options"
:clearable="true"
placeholder="Please select an option"
/>
</div>
</div>
</template>