Compare commits
No commits in common. "d431bd63d1e99d6388f979e43f4b224f066f58c1" and "5a65655fd529a36587edf156fc77b8a26570a351" have entirely different histories.
d431bd63d1
...
5a65655fd5
@ -1,4 +1,4 @@
|
|||||||
VITE_BASE_URL=http://localhost/:5173
|
VITE_BASE_URL=http://localhost:5173
|
||||||
VITE_BASE_DIRECTORY=/
|
VITE_BASE_DIRECTORY=/
|
||||||
VITE_APP_VERSION=0.0.1
|
VITE_APP_VERSION=0.0.1
|
||||||
VITE_APP_NAME='Executive Information System'
|
VITE_APP_NAME='Executive Information System'
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
{"name":"eis","version":"0.0.187-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js","set-version":"node version.js","version":"echo $npm_package_version"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
|
{"name":"eis","version":"0.0.185-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js","set-version":"node version.js","version":"echo $npm_package_version"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
|
||||||
@ -1 +1 @@
|
|||||||
{"version":"0.0.187-vm"}
|
{"version":"0.0.185-vm"}
|
||||||
@ -89,12 +89,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -165,12 +165,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -122,12 +122,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -90,12 +90,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -173,12 +173,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -155,13 +155,15 @@ onMounted(() => {
|
|||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'regional' || key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
} else {
|
}
|
||||||
|
|
||||||
fetchRegional()
|
fetchRegional()
|
||||||
fetchUid()
|
fetchUid()
|
||||||
}
|
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -88,12 +88,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -99,12 +99,15 @@ onMounted(() => {
|
|||||||
keys.forEach((key: any, index: any) => {
|
keys.forEach((key: any, index: any) => {
|
||||||
if (filterPresets.value[key]) {
|
if (filterPresets.value[key]) {
|
||||||
presetValues[index].value = filterPresets.value[key]
|
presetValues[index].value = filterPresets.value[key]
|
||||||
|
|
||||||
|
if (key !== 'uid') {
|
||||||
setFunctions[index](filterPresets.value[key])
|
setFunctions[index](filterPresets.value[key])
|
||||||
}
|
}
|
||||||
})
|
|
||||||
} else {
|
|
||||||
fetchUid()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchUid()
|
||||||
|
|
||||||
emit('update:filters', data.value)
|
emit('update:filters', data.value)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -47,7 +47,6 @@
|
|||||||
<DxColumn
|
<DxColumn
|
||||||
v-if="grouping.length > 0"
|
v-if="grouping.length > 0"
|
||||||
v-for="(group, index) in grouping"
|
v-for="(group, index) in grouping"
|
||||||
:key="index"
|
|
||||||
:width="150"
|
:width="150"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
:data-field="group.data"
|
:data-field="group.data"
|
||||||
|
|||||||
@ -985,8 +985,6 @@ const onCellClicked = (e: any) => {
|
|||||||
if (e.rowType == 'group') {
|
if (e.rowType == 'group') {
|
||||||
groupDialog.value = true
|
groupDialog.value = true
|
||||||
groupIndex.value = e.row.groupIndex
|
groupIndex.value = e.row.groupIndex
|
||||||
} else {
|
|
||||||
groupDialog.value = false
|
|
||||||
}
|
}
|
||||||
isDialogEnabled.value = true
|
isDialogEnabled.value = true
|
||||||
|
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type16 @update:filters="(value) => (filters = value)" />
|
<Type16 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -22,7 +21,6 @@
|
|||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -33,6 +31,16 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -40,12 +48,11 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -275,6 +282,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -282,10 +291,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type16 from '@/components/Form/FiltersType/Type16.vue'
|
import Type16 from '@/components/Form/FiltersType/Type16.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -296,162 +303,46 @@ import {
|
|||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
|
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const filters = ref()
|
const loading = ref(false)
|
||||||
const reportMeta = ref({
|
const clearSelection = () => {
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
dataGrid.clearSelection()
|
||||||
posko: { id: 0, name: 'Semua Posko' },
|
}
|
||||||
media: { id: '', name: 'Semua Media' },
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
periode: ''
|
if (selectedRowsData[0] != undefined) {
|
||||||
})
|
dataSelected.value = selectedRowsData[0]
|
||||||
|
}
|
||||||
const allowTableRequest = ref(false)
|
clearSelection()
|
||||||
const data = new CustomStore({
|
showDetail()
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanBerdasarkanMedia, query)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanBerdasarkanMedia
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
allowTableRequest.value = false
|
data.value = []
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const filterData = async (params: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
resetData()
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const { posko, uid, up3, media } = params
|
const { posko, uid, up3, media } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -463,46 +354,140 @@ const createQuery = (params: any) => {
|
|||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
media: media ? media.id : ''
|
media: media ? media.id : ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.berdasarkanMedia, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanBerdasarkanMedia
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearSelection = () => {
|
reportMeta.value = filters.value
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
})
|
||||||
dataGrid.clearSelection()
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (e.format === 'pdf') {
|
||||||
dataSelected.value = selectedRowsData[0]
|
exportToPDF(reportMeta, data)
|
||||||
}
|
|
||||||
clearSelection()
|
|
||||||
showDetail()
|
|
||||||
}
|
|
||||||
|
|
||||||
const showDetail = () => (dialogDetail.value = true)
|
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
|
||||||
reportData.value = await data.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, data, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const filters = ref()
|
||||||
dataGrid.endCustomLoading()
|
const reportMeta = ref({
|
||||||
}
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
posko: { id: 0, name: 'Semua Posko' },
|
||||||
|
media: { id: '', name: 'Semua Media' },
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100150',
|
||||||
|
waktu_lapor: '31-01-2023 17:16:17',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_response: '31-01-2023 17:56:28',
|
||||||
|
waktu_recovery: '31-01-2023 18:00:37',
|
||||||
|
durasi_response_time: 2411,
|
||||||
|
durasi_recovery_time: 249,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
waktu_media: '31-12-1969 17:00:00',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100985',
|
||||||
|
waktu_lapor: '31-01-2023 20:09:50',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_response: '31-01-2023 20:42:40',
|
||||||
|
waktu_recovery: '31-01-2023 20:49:35',
|
||||||
|
durasi_response_time: 1970,
|
||||||
|
durasi_recovery_time: 415,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Risky Ariyanto',
|
||||||
|
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
|
||||||
|
no_telp_pelapor: '6285240208016',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
waktu_media: '31-12-1969 17:00:00',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101461',
|
||||||
|
waktu_lapor: '31-01-2023 22:38:01',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_response: '31-01-2023 22:48:13',
|
||||||
|
waktu_recovery: '31-01-2023 22:54:06',
|
||||||
|
durasi_response_time: 612,
|
||||||
|
durasi_recovery_time: 353,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Junaedi Muntoro',
|
||||||
|
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
|
||||||
|
no_telp_pelapor: '628111588806',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
waktu_media: '31-12-1969 17:00:00',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5523020100067',
|
||||||
|
waktu_lapor: '31-01-2023 22:57:02',
|
||||||
|
pembuat_laporan: 'CC.55.SUMIATI',
|
||||||
|
waktu_response: '31-01-2023 23:18:55',
|
||||||
|
waktu_recovery: '31-12-1969 17:00:00',
|
||||||
|
durasi_response_time: 1313,
|
||||||
|
durasi_recovery_time: 33945870,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP ANAL ',
|
||||||
|
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
|
||||||
|
no_telp_pelapor: '6285777592240',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
waktu_media: '31-12-1969 17:00:00',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020103015',
|
||||||
|
waktu_lapor: '01-02-2023 00:39:03',
|
||||||
|
pembuat_laporan: 'CC.54.EKA.CSOI',
|
||||||
|
waktu_response: '01-02-2023 01:14:56',
|
||||||
|
waktu_recovery: '01-02-2023 01:19:32',
|
||||||
|
durasi_response_time: 2153,
|
||||||
|
durasi_recovery_time: 276,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU DIN',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
|
||||||
|
no_telp_pelapor: '082112050265',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
waktu_media: '31-12-1969 17:00:00',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="dataTable">
|
<div id="dataTable">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
key-expr="no_laporan"
|
key-expr="no_laporan"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
@ -23,7 +22,6 @@
|
|||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxPaging :page-size="20" :enabled="true" :page-index="0" />
|
<DxPaging :page-size="20" :enabled="true" :page-index="0" />
|
||||||
<DxPager
|
<DxPager
|
||||||
:visible="true"
|
:visible="true"
|
||||||
@ -34,6 +32,17 @@
|
|||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
|
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
|
||||||
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -41,12 +50,11 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
|
||||||
css-class="custom-table-column !text-right"
|
css-class="custom-table-column !text-right"
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -332,15 +340,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|
||||||
import InputText from '@/components/InputText.vue'
|
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -348,169 +354,32 @@ import {
|
|||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection,
|
DxSelection
|
||||||
DxLoadPanel
|
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { ref, reactive } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
|
import InputText from '@/components/InputText.vue'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const data = ref<any[]>([])
|
||||||
|
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
|
||||||
skip: 0,
|
|
||||||
take: 20,
|
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
const loading = ref(false)
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
posko: { id: 0, name: 'Semua Posko' },
|
|
||||||
periode: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(
|
|
||||||
queries.gangguan.daftar.ssdaftarGangguanDialihkanKePoskoLain,
|
|
||||||
query
|
|
||||||
)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanDialihkanKePoskoLain
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
allowTableRequest.value = false
|
data.value = []
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const filterData = async (params: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
resetData()
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const { posko, uid, up3 } = params
|
const { posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -521,48 +390,175 @@ const createQuery = (params: any) => {
|
|||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(query)
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanDialihkanKePoskoLain
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (selectedRowsData[0] != undefined) {
|
||||||
dataSelected.value = selectedRowsData[0]
|
dataSelected.value = selectedRowsData[0]
|
||||||
}
|
}
|
||||||
showDetail()
|
showDetail()
|
||||||
}
|
}
|
||||||
|
|
||||||
const showDetail = () => {
|
const showDetail = () => {
|
||||||
dialogDetail.value = true
|
dialogDetail.value = true
|
||||||
clearSelection()
|
clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
const filters = ref()
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const reportMeta = ref({
|
||||||
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
posko: { id: 0, name: 'Semua Posko' },
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
onMounted(() => {
|
||||||
reportData.value = await data.load()
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G1423012400040',
|
||||||
|
pembuat_laporan: 'CC.14.ALFIAN',
|
||||||
|
waktu_lapor: '01/02/2023 13:53:36',
|
||||||
|
waktu_dialihkan: '24/01/2023 02:20:22',
|
||||||
|
waktu_response: null,
|
||||||
|
waktu_recovery: null,
|
||||||
|
durasi_response_time: null,
|
||||||
|
durasi_recovery_time: null,
|
||||||
|
id_posko_lama: 181701,
|
||||||
|
nama_posko_lama: 'POSKO ULP SIAK SRI INDRAPURA',
|
||||||
|
id_posko_baru: 181801,
|
||||||
|
nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP HABIB',
|
||||||
|
alamat_pelapor: 'JL PEMBANGUNAN RT 5 RW 2 DESA RAWANG TAUH KEC LUBUK DALAM KAB SIAK ',
|
||||||
|
no_telp_pelapor: '081365027399',
|
||||||
|
keterangan_pelapor: 'GANGGUAN BERULANG : G1423012400025, BANYAK RUMAH PADAM',
|
||||||
|
media: 'Call PLN 123'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G1223012400580',
|
||||||
|
pembuat_laporan: 'CC.12.TONI',
|
||||||
|
waktu_lapor: '01/02/2023 13:53:36',
|
||||||
|
waktu_dialihkan: '24/01/2023 17:30:32',
|
||||||
|
waktu_response: null,
|
||||||
|
waktu_recovery: null,
|
||||||
|
durasi_response_time: null,
|
||||||
|
durasi_recovery_time: null,
|
||||||
|
id_posko_lama: 181101,
|
||||||
|
nama_posko_lama: 'POSKO ULP PEKANBARU KOTA TIMUR',
|
||||||
|
id_posko_baru: 181101,
|
||||||
|
nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
|
||||||
|
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP DAUT',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
|
||||||
|
no_telp_pelapor: '085278178766',
|
||||||
|
keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
|
||||||
|
media: 'Call PLN 123'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G1223012400580',
|
||||||
|
pembuat_laporan: 'CC.12.TONI',
|
||||||
|
waktu_lapor: '01/02/2023 13:53:36',
|
||||||
|
waktu_dialihkan: '24/01/2023 17:30:29',
|
||||||
|
waktu_response: null,
|
||||||
|
waktu_recovery: null,
|
||||||
|
durasi_response_time: null,
|
||||||
|
durasi_recovery_time: null,
|
||||||
|
id_posko_lama: 181111,
|
||||||
|
nama_posko_lama: 'POSKO ULP PEKANBARU KOTA BARAT',
|
||||||
|
id_posko_baru: 181101,
|
||||||
|
nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
|
||||||
|
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP DAUT',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
|
||||||
|
no_telp_pelapor: '085278178766',
|
||||||
|
keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
|
||||||
|
media: 'Call PLN 123'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G1423012400611',
|
||||||
|
pembuat_laporan: 'cc.14.OKTA',
|
||||||
|
waktu_lapor: '01/02/2023 13:53:36',
|
||||||
|
waktu_dialihkan: '24/01/2023 15:39:23',
|
||||||
|
waktu_response: null,
|
||||||
|
waktu_recovery: null,
|
||||||
|
durasi_response_time: null,
|
||||||
|
durasi_recovery_time: null,
|
||||||
|
id_posko_lama: 181201,
|
||||||
|
nama_posko_lama: 'POSKO ULP SIMPANG TIGA',
|
||||||
|
id_posko_baru: 181131,
|
||||||
|
nama_posko_baru: '',
|
||||||
|
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU SURYANTI',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JLN. KEPAU JAYA RT 01 RW 03 DESA KEPAU KEC. SIAK HULU KAB. KAMPAR PROV. RIAU. DIDEKAT SIMPANG PT. BENI',
|
||||||
|
no_telp_pelapor: '082246836428',
|
||||||
|
keterangan_pelapor: 'SR PUTUS (PTL PADAM) ',
|
||||||
|
media: 'Call PLN 123'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5223012400639',
|
||||||
|
pembuat_laporan: 'CC.52.HARYO.SM',
|
||||||
|
waktu_lapor: '01/02/2023 13:53:36',
|
||||||
|
waktu_dialihkan: '24/01/2023 11:02:02',
|
||||||
|
waktu_response: null,
|
||||||
|
waktu_recovery: null,
|
||||||
|
durasi_response_time: null,
|
||||||
|
durasi_recovery_time: null,
|
||||||
|
id_posko_lama: 182601,
|
||||||
|
nama_posko_lama: 'POSKO ULP BAGAN BATU',
|
||||||
|
id_posko_baru: 181801,
|
||||||
|
nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
|
||||||
|
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BAPAK SAOR MARUDUT',
|
||||||
|
alamat_pelapor:
|
||||||
|
'DESA BANJAR PANJANG KECAMATAN KERUMUTAN KABUPATEN PELALAWAN PROVINSI RIAU ',
|
||||||
|
no_telp_pelapor: '085278020428',
|
||||||
|
keterangan_pelapor: 'TERKAIT NO LAPOR G5423012405161 STATUS DIBATALKAN. BANYAK RUMAH PADAM',
|
||||||
|
media: 'Live Chat PLN Mobile'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (doc) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -22,7 +21,6 @@
|
|||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -33,6 +31,16 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -40,12 +48,11 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -270,6 +277,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -277,10 +286,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -291,181 +298,24 @@ import {
|
|||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const filters = ref()
|
const loading = ref(false)
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
posko: { id: 0, name: 'Semua Posko' },
|
|
||||||
periode: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(
|
|
||||||
queries.gangguan.daftar.ssdaftarGangguanDiselesaikanMobileAPKT,
|
|
||||||
query
|
|
||||||
)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanDiselesaikanMobileAPKT
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
|
||||||
|
|
||||||
const resetData = () => {
|
|
||||||
allowTableRequest.value = false
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
const { posko, uid, up3 } = params
|
|
||||||
|
|
||||||
return {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (selectedRowsData[0] != undefined) {
|
||||||
dataSelected.value = selectedRowsData[0]
|
dataSelected.value = selectedRowsData[0]
|
||||||
@ -476,29 +326,158 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
|
|
||||||
const showDetail = () => (dialogDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
const resetData = () => {
|
||||||
reportData.value = await data.load()
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
const filterData = async (params: any) => {
|
||||||
dataGrid.beginCustomLoading('')
|
resetData()
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { posko, uid, up3 } = params
|
||||||
|
|
||||||
if (pdf) {
|
const query = {
|
||||||
dataGrid.endCustomLoading()
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.diselesaikanMobileAPKT, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanDiselesaikanMobileAPKT
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, data, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const filters = ref()
|
||||||
dataGrid.endCustomLoading()
|
const reportMeta = ref({
|
||||||
}
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
posko: { id: 0, name: 'Semua Posko' },
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100150',
|
||||||
|
waktu_lapor: '01-02-2023 00:16:17',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_response: '01-02-2023 00:56:28',
|
||||||
|
waktu_recovery: '01-02-2023 01:00:37',
|
||||||
|
durasi_response_time: 2411,
|
||||||
|
durasi_recovery_time: 249,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100985',
|
||||||
|
waktu_lapor: '01-02-2023 03:09:50',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_response: '01-02-2023 03:42:40',
|
||||||
|
waktu_recovery: '01-02-2023 03:49:35',
|
||||||
|
durasi_response_time: 1970,
|
||||||
|
durasi_recovery_time: 415,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Risky Ariyanto',
|
||||||
|
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
|
||||||
|
no_telp_pelapor: '6285240208016',
|
||||||
|
keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101461',
|
||||||
|
waktu_lapor: '01-02-2023 05:38:01',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_response: '01-02-2023 05:48:13',
|
||||||
|
waktu_recovery: '01-02-2023 05:54:06',
|
||||||
|
durasi_response_time: 612,
|
||||||
|
durasi_recovery_time: 353,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Junaedi Muntoro',
|
||||||
|
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
|
||||||
|
no_telp_pelapor: '628111588806',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5523020100067',
|
||||||
|
waktu_lapor: '01-02-2023 05:57:02',
|
||||||
|
pembuat_laporan: 'CC.55.SUMIATI',
|
||||||
|
waktu_response: '01-02-2023 06:18:55',
|
||||||
|
waktu_recovery: '01-01-1970 00:00:00',
|
||||||
|
durasi_response_time: 1313,
|
||||||
|
durasi_recovery_time: 33958371,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP ANAL ',
|
||||||
|
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
|
||||||
|
no_telp_pelapor: '6285777592240',
|
||||||
|
keterangan_pelapor: 'BANYAK RUMAH PADAM ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020103015',
|
||||||
|
waktu_lapor: '01-02-2023 07:39:03',
|
||||||
|
pembuat_laporan: 'CC.54.EKA.CSOI',
|
||||||
|
waktu_response: '01-02-2023 08:14:56',
|
||||||
|
waktu_recovery: '01-02-2023 08:19:32',
|
||||||
|
durasi_response_time: 2153,
|
||||||
|
durasi_recovery_time: 276,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU DIN',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
|
||||||
|
no_telp_pelapor: '082112050265',
|
||||||
|
keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type6 @update:filters="(value) => (filters = value)" />
|
<Type6 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
@ -7,10 +7,9 @@
|
|||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loadingData == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -32,7 +31,15 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
<DxLoadPanel :enabled="true" />
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-model:visible.sync="loadingData"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -40,12 +47,11 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -304,6 +310,7 @@
|
|||||||
:row-alternation-enabled="true"
|
:row-alternation-enabled="true"
|
||||||
:hover-state-enabled="true"
|
:hover-state-enabled="true"
|
||||||
@selection-changed="onDataSubSelectionChanged"
|
@selection-changed="onDataSubSelectionChanged"
|
||||||
|
@exporting="onExporting"
|
||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
@ -317,12 +324,13 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
|
<!-- -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<!-- <DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/> -->
|
/>
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -407,51 +415,49 @@
|
|||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
<BufferDialog v-if="loadingSubData" />
|
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type6 from '@/components/Form/FiltersType/Type6.vue'
|
import Type6 from '@/components/Form/FiltersType/Type6.vue'
|
||||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import InputText from '@/components/InputText.vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
|
||||||
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxLoadPanel,
|
|
||||||
DxExport,
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
import { ref, reactive } from 'vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { formatNumber, isNumber } from '@/utils/numbers'
|
import { formatNumber, isNumber } from '@/utils/numbers'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
|
||||||
|
import { apolloClient } from '@/utils/api/api.graphql'
|
||||||
|
import { provideApolloClient } from '@vue/apollo-composable'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const client = apolloClient()
|
||||||
|
provideApolloClient(client)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const position = { of: '#data' }
|
||||||
skip: 0,
|
const showIndicator = ref(true)
|
||||||
take: 20,
|
const shading = ref(true)
|
||||||
requireTotalCount: true,
|
const showPane = ref(true)
|
||||||
sort: null,
|
const data = ref<any[]>([])
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
|
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataSub = ref<any[]>([])
|
const dataSub = ref<any[]>([])
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dataSubSelected = ref<any>()
|
const dataSubSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
|
const closedialogDetail = () => (dialogDetail.value = false)
|
||||||
|
const loadingData = ref(false)
|
||||||
const loadingSubData = ref(false)
|
const loadingSubData = ref(false)
|
||||||
const detailType = ref('form')
|
const detailType = ref('form') // form, table
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
const reportMeta = ref({
|
const reportMeta = ref({
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
@ -462,56 +468,6 @@ const reportMeta = ref({
|
|||||||
maxJmlLapor: 1
|
maxJmlLapor: 1
|
||||||
})
|
})
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(
|
|
||||||
queries.gangguan.daftar.ssdaftarGangguanMelaporLebihDariSatuKali,
|
|
||||||
query
|
|
||||||
)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanMelaporLebihDariSatuKali
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const setDetailType = (columnCaption: string) => {
|
const setDetailType = (columnCaption: string) => {
|
||||||
if (columnCaption == 'Jml Lapor') {
|
if (columnCaption == 'Jml Lapor') {
|
||||||
detailType.value = 'table'
|
detailType.value = 'table'
|
||||||
@ -521,6 +477,7 @@ const setDetailType = (columnCaption: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getDetail = async () => {
|
const getDetail = async () => {
|
||||||
|
const dateValue = filters.value.periode.split(' s/d ')
|
||||||
const selected = dataSelected.value
|
const selected = dataSelected.value
|
||||||
|
|
||||||
const query = {
|
const query = {
|
||||||
@ -546,16 +503,14 @@ const getDetail = async () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const showDetail = () => {
|
const showDetail = () => {
|
||||||
clearSelection()
|
clearSelection()
|
||||||
|
|
||||||
dataSubSelected.value = null
|
dataSubSelected.value = null
|
||||||
|
|
||||||
if (detailType.value == 'table') {
|
if (detailType.value == 'table') {
|
||||||
getDetail()
|
getDetail()
|
||||||
} else {
|
} else {
|
||||||
@ -566,102 +521,28 @@ const showDetail = () => {
|
|||||||
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (selectedRowsData[0] != undefined) {
|
||||||
dataSelected.value = selectedRowsData[0]
|
dataSelected.value = selectedRowsData[0]
|
||||||
|
|
||||||
showDetail()
|
showDetail()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
const data = selectedRowsData[0]
|
const data = selectedRowsData[0]
|
||||||
|
|
||||||
dataSubSelected.value = data
|
dataSubSelected.value = data
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
allowTableRequest.value = false
|
data.value = []
|
||||||
dataSub.value = []
|
dataSub.value = []
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const filterData = async (params: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
resetData()
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
|
const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
|
minJmlLapor: minJmlLapor ? minJmlLapor : 1,
|
||||||
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
|
maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
@ -674,31 +555,131 @@ const createQuery = (params: any) => {
|
|||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
}
|
||||||
|
loadingData.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
reportMeta.value = filters.value
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
})
|
||||||
|
.catch((err) => {
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
console.error(err)
|
||||||
reportData.value = await data.load()
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loadingData.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
const onExporting = (e: any) => {
|
||||||
dataGrid.beginCustomLoading('')
|
if (e.format === 'pdf') {
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
exportToPDF(reportMeta, data)
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
await exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, data, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
onMounted(() => {
|
||||||
dataGrid.endCustomLoading()
|
if (import.meta.env.DEV) {
|
||||||
}
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100150',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 00:16:17',
|
||||||
|
waktu_response: '01-02-2023 00:56:28',
|
||||||
|
waktu_recovery: '01-02-2023 01:00:37',
|
||||||
|
jumlah_lapor: 0,
|
||||||
|
durasi_response_time: 2411,
|
||||||
|
durasi_recovery_time: 249,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100985',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 03:09:50',
|
||||||
|
waktu_response: '01-02-2023 03:42:40',
|
||||||
|
waktu_recovery: '01-02-2023 03:49:35',
|
||||||
|
jumlah_lapor: 0,
|
||||||
|
durasi_response_time: 1970,
|
||||||
|
durasi_recovery_time: 415,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Risky Ariyanto',
|
||||||
|
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
|
||||||
|
no_telp_pelapor: '6285240208016',
|
||||||
|
keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101461',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 05:38:01',
|
||||||
|
waktu_response: '01-02-2023 05:48:13',
|
||||||
|
waktu_recovery: '01-02-2023 05:54:06',
|
||||||
|
jumlah_lapor: 0,
|
||||||
|
durasi_response_time: 612,
|
||||||
|
durasi_recovery_time: 353,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Junaedi Muntoro',
|
||||||
|
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
|
||||||
|
no_telp_pelapor: '628111588806',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101612',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 05:54:33',
|
||||||
|
waktu_response: '01-01-1970 00:00:00',
|
||||||
|
waktu_recovery: '01-01-1970 00:00:00',
|
||||||
|
jumlah_lapor: 0,
|
||||||
|
durasi_response_time: 0,
|
||||||
|
durasi_recovery_time: 0,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_pelapor: 'listrik turun lagi setelah diganti mcb oleh petugas jam 1 malam',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5523020100067',
|
||||||
|
pembuat_laporan: 'CC.55.SUMIATI',
|
||||||
|
waktu_lapor: '01-02-2023 05:57:02',
|
||||||
|
waktu_response: '01-02-2023 06:18:55',
|
||||||
|
waktu_recovery: '01-01-1970 00:00:00',
|
||||||
|
jumlah_lapor: 0,
|
||||||
|
durasi_response_time: 0,
|
||||||
|
durasi_recovery_time: 0,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP ANAL ',
|
||||||
|
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
|
||||||
|
no_telp_pelapor: '6285777592240',
|
||||||
|
keterangan_pelapor: 'BANYAK RUMAH PADAM ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type7
|
<Type7
|
||||||
@update:filters="(value) => (filters = value)"
|
@update:filters="(value) => (filters = value)"
|
||||||
:sla-options="[
|
:sla-options="[
|
||||||
@ -22,11 +22,10 @@
|
|||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -38,7 +37,6 @@
|
|||||||
@selection-changed="onSelectionChanged"
|
@selection-changed="onSelectionChanged"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -49,6 +47,16 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -56,12 +64,11 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -305,6 +312,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -312,10 +321,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type7 from '@/components/Form/FiltersType/Type7.vue'
|
import Type7 from '@/components/Form/FiltersType/Type7.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { ref, reactive } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -326,167 +333,50 @@ import {
|
|||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import {
|
import {
|
||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportToDOCX
|
exportToDOCX
|
||||||
} from '@/report/Gangguan/Daftar/DGangguan_RecoveryTime'
|
} from '@/report/Gangguan/Daftar/DGangguan_RecoveryTime'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const filters = ref()
|
const loading = ref(false)
|
||||||
const reportMeta = ref({
|
const clearSelection = () => {
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
dataGrid.clearSelection()
|
||||||
posko: { id: 0, name: 'Semua Posko' },
|
}
|
||||||
periode: '',
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
minTime: '',
|
if (selectedRowsData[0] != undefined) {
|
||||||
maxTime: ''
|
dataSelected.value = selectedRowsData[0]
|
||||||
})
|
}
|
||||||
|
clearSelection()
|
||||||
const allowTableRequest = ref(false)
|
showDetail()
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanRecoveryTime, query)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanRecoveryTime
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
allowTableRequest.value = false
|
data.value = []
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const filterData = async (params: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
resetData()
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -499,48 +389,147 @@ const createQuery = (params: any) => {
|
|||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
}
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanRecoveryTime
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearSelection = () => {
|
reportMeta.value = filters.value
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
})
|
||||||
dataGrid.clearSelection()
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (e.format === 'pdf') {
|
||||||
dataSelected.value = selectedRowsData[0]
|
exportToPDF(reportMeta, data)
|
||||||
}
|
|
||||||
showDetail()
|
|
||||||
}
|
|
||||||
|
|
||||||
const showDetail = () => {
|
|
||||||
dialogDetail.value = true
|
|
||||||
clearSelection()
|
|
||||||
}
|
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
|
||||||
reportData.value = await data.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, data, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const filters = ref()
|
||||||
dataGrid.endCustomLoading()
|
const reportMeta = ref({
|
||||||
}
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
posko: { id: 0, name: 'Semua Posko' },
|
||||||
|
periode: '',
|
||||||
|
minTime: '',
|
||||||
|
maxTime: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100150',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 00:16:17',
|
||||||
|
waktu_response: '01-02-2023 00:56:28',
|
||||||
|
waktu_recovery: '01-02-2023 01:00:37',
|
||||||
|
durasi_response_time: 2411,
|
||||||
|
durasi_recovery_time: 249,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100985',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 03:09:50',
|
||||||
|
waktu_response: '01-02-2023 03:42:40',
|
||||||
|
waktu_recovery: '01-02-2023 03:49:35',
|
||||||
|
durasi_response_time: 1970,
|
||||||
|
durasi_recovery_time: 415,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Risky Ariyanto',
|
||||||
|
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
|
||||||
|
no_telp_pelapor: '6285240208016',
|
||||||
|
keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101461',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 05:38:01',
|
||||||
|
waktu_response: '01-02-2023 05:48:13',
|
||||||
|
waktu_recovery: '01-02-2023 05:54:06',
|
||||||
|
durasi_response_time: 612,
|
||||||
|
durasi_recovery_time: 353,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Junaedi Muntoro',
|
||||||
|
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
|
||||||
|
no_telp_pelapor: '628111588806',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5523020100067',
|
||||||
|
pembuat_laporan: 'CC.55.SUMIATI',
|
||||||
|
waktu_lapor: '01-02-2023 05:57:02',
|
||||||
|
waktu_response: '01-02-2023 06:18:55',
|
||||||
|
waktu_recovery: '01-01-1970 00:00:00',
|
||||||
|
durasi_response_time: 1313,
|
||||||
|
durasi_recovery_time: 33958236,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP ANAL ',
|
||||||
|
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
|
||||||
|
no_telp_pelapor: '6285777592240',
|
||||||
|
keterangan_pelapor: 'BANYAK RUMAH PADAM ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020103015',
|
||||||
|
pembuat_laporan: 'CC.54.EKA.CSOI',
|
||||||
|
waktu_lapor: '01-02-2023 07:39:03',
|
||||||
|
waktu_response: '01-02-2023 08:14:56',
|
||||||
|
waktu_recovery: '01-02-2023 08:19:32',
|
||||||
|
durasi_response_time: 2153,
|
||||||
|
durasi_recovery_time: 276,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU DIN',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
|
||||||
|
no_telp_pelapor: '082112050265',
|
||||||
|
keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type7 @update:filters="(value) => (filters = value)" />
|
<Type7 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
@ -9,8 +9,7 @@
|
|||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
@option-changed="handleRequestChange"
|
v-if="loading == false"
|
||||||
:remote-operations="true"
|
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -22,7 +21,6 @@
|
|||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -33,6 +31,16 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -40,13 +48,13 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
|
cell-template="cellCenter"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -301,191 +309,71 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type7 from '@/components/Form/FiltersType/Type7.vue'
|
import Type7 from '@/components/Form/FiltersType/Type7.vue'
|
||||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import InputText from '@/components/InputText.vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxLoadPanel,
|
|
||||||
DxExport,
|
DxExport,
|
||||||
|
DxLoadPanel,
|
||||||
DxPager,
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
import { ref, reactive } from 'vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import {
|
import {
|
||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportToDOCX
|
exportToDOCX
|
||||||
} from '@/report/Gangguan/Daftar/DGangguan_ResponseTime'
|
} from '@/report/Gangguan/Daftar/DGangguan_ResponseTime'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const filters = ref()
|
const loading = ref(false)
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
posko: { id: 0, name: 'Semua Posko' },
|
|
||||||
periode: '',
|
|
||||||
minTime: '',
|
|
||||||
maxTime: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(queries.gangguan.daftar.ssdaftarGangguanResponseTime, query)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanResponseTime
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
if (selectedRowsData[0] != undefined) {
|
||||||
|
dataSelected.value = selectedRowsData[0]
|
||||||
|
}
|
||||||
|
clearSelection()
|
||||||
|
showDetail()
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
allowTableRequest.value = false
|
data.value = []
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const filterData = async (params: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
resetData()
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const { minTime, maxTime, posko, uid, up3 } = params
|
const { minTime, maxTime, posko, uid, up3 } = params
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -498,44 +386,157 @@ const createQuery = (params: any) => {
|
|||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
}
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.responseTime, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanResponseTime
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
reportMeta.value = filters.value
|
||||||
if (selectedRowsData[0] != undefined) {
|
})
|
||||||
dataSelected.value = selectedRowsData[0]
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
clearSelection()
|
const onExporting = (e: any) => {
|
||||||
showDetail()
|
if (e.format === 'pdf') {
|
||||||
}
|
exportToPDF(reportMeta, data)
|
||||||
|
|
||||||
const showDetail = () => (dialogDetail.value = true)
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
|
||||||
reportData.value = await data.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, data, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const filters = ref()
|
||||||
dataGrid.endCustomLoading()
|
const reportMeta = ref({
|
||||||
}
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
posko: { id: 0, name: 'Semua Posko' },
|
||||||
|
periode: '',
|
||||||
|
minTime: '',
|
||||||
|
maxTime: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100150',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 00:16:17',
|
||||||
|
waktu_response: '01-02-2023 00:56:28',
|
||||||
|
waktu_recovery: '01-02-2023 01:00:37',
|
||||||
|
durasi_response_time: 2411,
|
||||||
|
durasi_recovery_time: 249,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS',
|
||||||
|
penyebab: 'P3124142424',
|
||||||
|
tindakan: 'P3124142424'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100985',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 03:09:50',
|
||||||
|
waktu_response: '01-02-2023 03:42:40',
|
||||||
|
waktu_recovery: '01-02-2023 03:49:35',
|
||||||
|
durasi_response_time: 1970,
|
||||||
|
durasi_recovery_time: 415,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Risky Ariyanto',
|
||||||
|
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
|
||||||
|
no_telp_pelapor: '6285240208016',
|
||||||
|
keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS',
|
||||||
|
penyebab: 'P3124142424',
|
||||||
|
tindakan: 'P3124142424'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101461',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 05:38:01',
|
||||||
|
waktu_response: '01-02-2023 05:48:13',
|
||||||
|
waktu_recovery: '01-02-2023 05:54:06',
|
||||||
|
durasi_response_time: 612,
|
||||||
|
durasi_recovery_time: 353,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Junaedi Muntoro',
|
||||||
|
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
|
||||||
|
no_telp_pelapor: '628111588806',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS',
|
||||||
|
penyebab: 'P3124142424',
|
||||||
|
tindakan: 'P3124142424'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5523020100067',
|
||||||
|
pembuat_laporan: 'CC.55.SUMIATI',
|
||||||
|
waktu_lapor: '01-02-2023 05:57:02',
|
||||||
|
waktu_response: '01-02-2023 06:18:55',
|
||||||
|
waktu_recovery: '01-01-1970 00:00:00',
|
||||||
|
durasi_response_time: 1313,
|
||||||
|
durasi_recovery_time: 0,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP ANAL ',
|
||||||
|
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
|
||||||
|
no_telp_pelapor: '6285777592240',
|
||||||
|
keterangan_pelapor: 'BANYAK RUMAH PADAM ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS',
|
||||||
|
penyebab: 'P3124142424',
|
||||||
|
tindakan: 'P3124142424'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020103015',
|
||||||
|
pembuat_laporan: 'CC.54.EKA.CSOI',
|
||||||
|
waktu_lapor: '01-02-2023 07:39:03',
|
||||||
|
waktu_response: '01-02-2023 08:14:56',
|
||||||
|
waktu_recovery: '01-02-2023 08:19:32',
|
||||||
|
durasi_response_time: 2153,
|
||||||
|
durasi_recovery_time: 276,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
is_marking: 0,
|
||||||
|
referensi_marking: 'P3124142424',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU DIN',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
|
||||||
|
no_telp_pelapor: '082112050265',
|
||||||
|
keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS',
|
||||||
|
penyebab: 'P3124142424',
|
||||||
|
tindakan: 'P3124142424'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
@ -7,10 +7,9 @@
|
|||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -22,7 +21,6 @@
|
|||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -33,6 +31,16 @@
|
|||||||
:show-info="true"
|
:show-info="true"
|
||||||
:show-navigation-buttons="true"
|
:show-navigation-buttons="true"
|
||||||
/>
|
/>
|
||||||
|
<!-- <DxLoadPanel
|
||||||
|
shading-color="rgba(0,0,0,0.4)"
|
||||||
|
:position="position"
|
||||||
|
:show-indicator="showIndicator"
|
||||||
|
:show-pane="showPane"
|
||||||
|
:shading="shading"
|
||||||
|
v-if="loading"
|
||||||
|
v-model:visible="loading"
|
||||||
|
:enabled="true"
|
||||||
|
/> -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport
|
||||||
:enabled="true"
|
:enabled="true"
|
||||||
@ -40,12 +48,11 @@
|
|||||||
:allow-export-selected-data="false"
|
:allow-export-selected-data="false"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -274,6 +281,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -281,10 +290,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
import Type1 from '@/components/Form/FiltersType/Type1.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -295,181 +302,24 @@ import {
|
|||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection
|
DxSelection
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
|
import { useQuery } from '@vue/apollo-composable'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
|
import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const filters = ref()
|
const loading = ref(false)
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
posko: { id: 0, name: 'Semua Posko' },
|
|
||||||
periode: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(
|
|
||||||
queries.gangguan.daftar.ssdaftarGangguanSelesaiTanpaIdPelanggan,
|
|
||||||
query
|
|
||||||
)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarGangguanSelesaiTanpaIdPelanggan
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
|
||||||
|
|
||||||
const resetData = () => {
|
|
||||||
allowTableRequest.value = false
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const { posko, uid, up3 } = params
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
|
|
||||||
return {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (selectedRowsData[0] != undefined) {
|
||||||
dataSelected.value = selectedRowsData[0]
|
dataSelected.value = selectedRowsData[0]
|
||||||
@ -480,29 +330,157 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
|
|
||||||
const showDetail = () => (dialogDetail.value = true)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
const resetData = () => {
|
||||||
reportData.value = await data.load()
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
const filterData = async (params: any) => {
|
||||||
dataGrid.beginCustomLoading('')
|
resetData()
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
const { posko, uid, up3 } = params
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
|
||||||
if (pdf) {
|
const query = {
|
||||||
dataGrid.endCustomLoading()
|
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
|
||||||
}
|
}
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.gangguan.daftar.selesaiTanpaIDPelanggan, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarGangguanSelesaiTanpaIdPelanggan
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, data, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const filters = ref()
|
||||||
dataGrid.endCustomLoading()
|
const reportMeta = ref({
|
||||||
}
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
posko: { id: 0, name: 'Semua Posko' },
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100150',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 00:16:17',
|
||||||
|
waktu_response: '01-02-2023 00:56:28',
|
||||||
|
waktu_recovery: '01-02-2023 01:00:37',
|
||||||
|
durasi_response_time: 2411,
|
||||||
|
durasi_recovery_time: 249,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Raihana S. Rahmahadi',
|
||||||
|
alamat_pelapor: 'JL BKT RAFLESIA N8-16',
|
||||||
|
no_telp_pelapor: '6282138889101',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MCB LEMAH DAYA RI/2200VA. SESUAI INFO PELANGGAN SUDAH ADA PETUGAS YANG MENGHUBUNGI DIINFORMASIKAN AKAN ADA PETUGAS YANG DATANG KE LOKASI.',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020100985',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 03:09:50',
|
||||||
|
waktu_response: '01-02-2023 03:42:40',
|
||||||
|
waktu_recovery: '01-02-2023 03:49:35',
|
||||||
|
durasi_response_time: 1970,
|
||||||
|
durasi_recovery_time: 415,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Risky Ariyanto',
|
||||||
|
alamat_pelapor: 'JL JANKES AD No. RT.7 RW.2',
|
||||||
|
no_telp_pelapor: '6285240208016',
|
||||||
|
keterangan_pelapor: 'gagal isi token dan di meteran ada tulisan Periksa',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020101461',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '01-02-2023 05:38:01',
|
||||||
|
waktu_response: '01-02-2023 05:48:13',
|
||||||
|
waktu_recovery: '01-02-2023 05:54:06',
|
||||||
|
durasi_response_time: 612,
|
||||||
|
durasi_recovery_time: 353,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Junaedi Muntoro',
|
||||||
|
alamat_pelapor: 'PR BKT GOLF ARCADIA BLK G.06 No.5 CBBR',
|
||||||
|
no_telp_pelapor: '628111588806',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'Mohon bantuan isi token PLN 3214732093\\n\\nPT. KARYA CANTIKA KUSUMA\\n\\nBukit Golf Riverside\\nKluster Arcadia Blok G6/5\\nBojong Nangka Gunung Putri Bogor\\n\\nGagal isi Tokel Tertera Meteran TERPERIKSA.\\n\\nMOHON BANTUAN PAK..',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5523020100067',
|
||||||
|
pembuat_laporan: 'CC.55.SUMIATI',
|
||||||
|
waktu_lapor: '01-02-2023 05:57:02',
|
||||||
|
waktu_response: '01-02-2023 06:18:55',
|
||||||
|
waktu_recovery: '01-01-1970 00:00:00',
|
||||||
|
durasi_response_time: 1313,
|
||||||
|
durasi_recovery_time: 33948072,
|
||||||
|
status_akhir: 'Dibatalkan',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP ANAL ',
|
||||||
|
alamat_pelapor: 'JL MANUNGGAL RT 05 RW 02 KEL KELAPA DUA WETAN KEC CIRACAS JAKARTA TIMUR ',
|
||||||
|
no_telp_pelapor: '6285777592240',
|
||||||
|
keterangan_pelapor: 'BANYAK RUMAH PADAM ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'G5423020103015',
|
||||||
|
pembuat_laporan: 'CC.54.EKA.CSOI',
|
||||||
|
waktu_lapor: '01-02-2023 07:39:03',
|
||||||
|
waktu_response: '01-02-2023 08:14:56',
|
||||||
|
waktu_recovery: '01-02-2023 08:19:32',
|
||||||
|
durasi_response_time: 2153,
|
||||||
|
durasi_recovery_time: 276,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU DIN',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL. HAJI MIUN NO.97 RT. 1 RW 2 KEL KALISARI KEC. PASAR REBO JAKTIM, SEBERANG CAFE LAW COFFE ',
|
||||||
|
no_telp_pelapor: '082112050265',
|
||||||
|
keterangan_pelapor: 'MCB LEMAH DAYA 1.300 VA ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_posko: 'POSKO CIRACAS'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => (filters = value)" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -23,7 +22,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -43,12 +41,11 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -284,6 +281,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -291,10 +289,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -312,161 +308,59 @@ import {
|
|||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportToDOCX
|
exportToDOCX
|
||||||
} from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
|
} from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
|
||||||
periode: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanBerdasarkanMedia, query)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanBerdasarkanMedia
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const resetData = () => {
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
allowTableRequest.value = false
|
const clearSelection = () => {
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
dataGrid.clearSelection()
|
||||||
|
}
|
||||||
dataGridDataSource.reload()
|
const showDetail = () => {
|
||||||
|
clearSelection()
|
||||||
|
dialogDetail.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
if (selectedRowsData[0] != undefined) {
|
||||||
if (e.value !== '') {
|
dataSelected.value = selectedRowsData[0]
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
}
|
||||||
|
showDetail()
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
|
} else if (e.format === 'xlsx') {
|
||||||
|
exportToXLSX(reportMeta, e)
|
||||||
} else {
|
} else {
|
||||||
requestOptions.filter = null
|
exportToDOCX(reportMeta, data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
const data = ref<any[]>([])
|
||||||
requestOptions.take = e.value
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const resetData = () => {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
const filterData = async (params: any) => {
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
resetData()
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { ulp, uid, up3 } = params
|
const { ulp, uid, up3 } = params
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -477,48 +371,135 @@ const createQuery = (params: any) => {
|
|||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanBerdasarkanMedia, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanBerdasarkanMedia
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearSelection = () => {
|
reportMeta.value = filters.value
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
})
|
||||||
dataGrid.clearSelection()
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
const filters = ref()
|
||||||
if (selectedRowsData[0] != undefined) {
|
const reportMeta = ref({
|
||||||
dataSelected.value = selectedRowsData[0]
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
}
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
showDetail()
|
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||||
}
|
periode: ''
|
||||||
|
})
|
||||||
|
|
||||||
const showDetail = () => {
|
onMounted(() => {
|
||||||
clearSelection()
|
if (import.meta.env.DEV) {
|
||||||
dialogDetail.value = true
|
data.value = [
|
||||||
}
|
{
|
||||||
|
no_laporan: 'K5123020100019',
|
||||||
const onExporting = async (e: any) => {
|
waktu_lapor: '01/02/2023 01:59:02',
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
waktu_response: '01/02/2023 05:22:50',
|
||||||
|
waktu_recovery: '01/02/2023 08:33:38',
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
durasi_response_time: 12228,
|
||||||
reportData.value = await data.load()
|
durasi_recovery_time: 11448,
|
||||||
}
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
nama_pelapor: 'BP AHMAD',
|
||||||
dataGrid.beginCustomLoading('')
|
alamat_pelapor:
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
|
||||||
|
no_telp_pelapor: '082320000152',
|
||||||
if (pdf) {
|
keterangan_pelapor:
|
||||||
dataGrid.endCustomLoading()
|
'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
|
||||||
}
|
media: 'Call PLN 123',
|
||||||
} else if (e.format === 'xlsx') {
|
waktu_media: '01/01/1970 00:00:00',
|
||||||
exportToXLSX(reportMeta, e)
|
keterangan_media: 'x',
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
nama_ulp: 'UP3 TANJUNG PRIOK'
|
||||||
dataGrid.beginCustomLoading('')
|
},
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
{
|
||||||
|
no_laporan: 'K5123020100021',
|
||||||
if (doc) {
|
waktu_lapor: '01/02/2023 02:04:04',
|
||||||
dataGrid.endCustomLoading()
|
waktu_response: '01/02/2023 02:26:01',
|
||||||
}
|
waktu_recovery: '01/02/2023 02:34:06',
|
||||||
|
durasi_response_time: 1317,
|
||||||
|
durasi_recovery_time: 485,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU TITIN ',
|
||||||
|
alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
|
||||||
|
no_telp_pelapor: '087786974290',
|
||||||
|
keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
waktu_media: '01/01/1970 00:00:00',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
nama_ulp: 'ULP CIBITUNG'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K1423020100022',
|
||||||
|
waktu_lapor: '01/02/2023 03:13:25',
|
||||||
|
waktu_response: '01/02/2023 04:59:44',
|
||||||
|
waktu_recovery: '01/02/2023 07:03:37',
|
||||||
|
durasi_response_time: 6379,
|
||||||
|
durasi_recovery_time: 7433,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '000000000000000001820788',
|
||||||
|
nama_pelapor: 'IBU IRFI ',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL NIAGA 7 PERUM KEMANG BLOK F NO 23 KEC RAWA LUMBU KEL SEPANJANG JAYA KOTA BEKASI ACUAN LOKASI DEKAT RUMAH YATIM ',
|
||||||
|
no_telp_pelapor: '62816922683',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43 (PTL TIDAK PADAM) \\nDENGAN NO METER 56700750112 DAN SISA KWH 15.1',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
waktu_media: '01/01/1970 00:00:00',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
nama_ulp: 'ULP BANTARGEBANG'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100106',
|
||||||
|
waktu_lapor: '01/02/2023 03:45:58',
|
||||||
|
waktu_response: '01/02/2023 06:24:51',
|
||||||
|
waktu_recovery: '01/02/2023 06:28:11',
|
||||||
|
durasi_response_time: 9533,
|
||||||
|
durasi_recovery_time: 200,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '000000000000000000943441',
|
||||||
|
nama_pelapor: 'IBU MELLY KURNIASIH',
|
||||||
|
alamat_pelapor: 'PERUMAHAN CEMPAKA ARUM JL. FLAMBOYAN 5 NO 191 CIREBON',
|
||||||
|
no_telp_pelapor: '08889353988',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'LEBIH TAGIH. ST AK REK FEB 2023 (28/01/2023) = 4608, ST APP TGL 26/01/2023 = 4496. REK BELUM DILUNASI. (RUMAH TIDAK DIHUNI NAMUN PAGAR TIDAK TERKUNCI, PETUGAS TIDAK DIKETAHUI DATANG KE LOKASI). PELANGGAN MENGINGINKAN AGAR HAL TERSEBUT TIDAK TERULANG KEMBALI.',
|
||||||
|
media: 'Live Chat PLN Mobile',
|
||||||
|
waktu_media: '01/01/1970 00:00:00',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
nama_ulp: 'ULP SUMBER'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100112',
|
||||||
|
waktu_lapor: '01/02/2023 04:16:48',
|
||||||
|
waktu_response: '01/02/2023 05:58:33',
|
||||||
|
waktu_recovery: '01/02/2023 12:02:23',
|
||||||
|
durasi_response_time: 6105,
|
||||||
|
durasi_recovery_time: 21830,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP HENDRIYANTO',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
|
||||||
|
no_telp_pelapor: '085921182228',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
|
||||||
|
media: 'Live Chat PLN Mobile',
|
||||||
|
waktu_media: '01/01/1970 00:00:00',
|
||||||
|
keterangan_media: 'x',
|
||||||
|
nama_ulp: 'ULP SEDAYU'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => (filters = value)" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -23,7 +22,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -43,13 +41,13 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column !align-top"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="170"
|
:width="170"
|
||||||
@ -319,6 +317,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -326,10 +325,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -344,20 +341,16 @@ import {
|
|||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>({})
|
const dataSelected = ref<any>({})
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
const loading = ref(false)
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
const reportMeta = ref({
|
const reportMeta = ref({
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
@ -366,137 +359,42 @@ const reportMeta = ref({
|
|||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
const showDetail = () => (dialogDetail.value = true)
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanDialihkanKeUnitLain, query)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanDialihkanKeUnitLain
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
|
|
||||||
const resetData = () => {
|
const onExporting = (e: any) => {
|
||||||
allowTableRequest.value = false
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
} else if (e.format === 'xlsx') {
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
exportToXLSX(reportMeta, e)
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
} else {
|
||||||
requestOptions.filter = null
|
exportToDOCX(reportMeta, data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
if (e.name === 'paging') {
|
const clearSelection = () => {
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
const columns = dataGrid.getVisibleColumns()
|
dataGrid.clearSelection()
|
||||||
|
}
|
||||||
const searchOptions = []
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
if (selectedRowsData[0] != undefined) {
|
||||||
for (const column of columns) {
|
dataSelected.value = selectedRowsData[0]
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
}
|
||||||
continue
|
clearSelection()
|
||||||
|
showDetail()
|
||||||
}
|
}
|
||||||
|
|
||||||
searchOptions.push({
|
const resetData = () => {
|
||||||
field: column.dataField,
|
data.value = []
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return searchOptions
|
const filterData = async (params: any) => {
|
||||||
}
|
resetData()
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { ulp, uid, up3 } = params
|
const { ulp, uid, up3 } = params
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -507,46 +405,141 @@ const createQuery = (params: any) => {
|
|||||||
idUid: uid ? uid.id : 0,
|
idUid: uid ? uid.id : 0,
|
||||||
idUp3: up3 ? up3.id : 0
|
idUp3: up3 ? up3.id : 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanDialihkanKeUnitLain
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearSelection = () => {
|
reportMeta.value = filters.value
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
})
|
||||||
dataGrid.clearSelection()
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
onMounted(() => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (import.meta.env.DEV) {
|
||||||
dataSelected.value = selectedRowsData[0]
|
data.value = [
|
||||||
}
|
{
|
||||||
clearSelection()
|
no_laporan: 'K5523020400288',
|
||||||
showDetail()
|
pembuat_laporan: 'CC.55.ANISA',
|
||||||
}
|
waktu_lapor: '04/02/2023 11:18:57',
|
||||||
|
waktu_dialihkan: '04/02/2023 12:49:36',
|
||||||
const showDetail = () => (dialogDetail.value = true)
|
waktu_response: '04/02/2023 12:50:21',
|
||||||
|
waktu_recovery: '04/02/2023 13:06:53',
|
||||||
const onExporting = async (e: any) => {
|
durasi_response_time: 5484,
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
durasi_recovery_time: 992,
|
||||||
|
id_unit_lama: 227,
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
nama_unit_lama: 'ULP MEDAN SELATAN',
|
||||||
reportData.value = await data.load()
|
id_unit_baru: 5,
|
||||||
}
|
nama_unit_baru: 'ULP DENAI',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
idpel_nometer: '',
|
||||||
dataGrid.beginCustomLoading('')
|
nama_pelapor: 'IBU ELVIRA ',
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
alamat_pelapor:
|
||||||
|
'JL PASAR 3 GG PISANG NO.22 RT0/RW0 KEL BANDAR KALIFA KEC PERCUT SEI TUAN KAB DELI SERDANG SUMATRA UTARA',
|
||||||
if (pdf) {
|
no_telp_pelapor: '087882621344',
|
||||||
dataGrid.endCustomLoading()
|
keterangan_pelapor:
|
||||||
}
|
'1 APP PRABAYAR TERTERA GAGAL. TIDAK BISA MEMASUKKAN PULSA. (PTL TIDAK PADAM ). SETELAH UPDATE VKRN 43. NO TOKEN : 38665587538675472633. SISA PULSA : 43.20 KWH PELANGGAN MENGHUBUNGI KEMBALI. UPDATE CC.52.ETA',
|
||||||
} else if (e.format === 'xlsx') {
|
media: 'Call PLN 123'
|
||||||
exportToXLSX(reportMeta, e)
|
},
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
{
|
||||||
dataGrid.beginCustomLoading('')
|
no_laporan: 'K5423021005925',
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
pembuat_laporan: 'CC.54.HENDI',
|
||||||
|
waktu_lapor: '10/02/2023 20:24:35',
|
||||||
if (doc) {
|
waktu_dialihkan: '10/02/2023 21:02:39',
|
||||||
dataGrid.endCustomLoading()
|
waktu_response: '10/02/2023 21:36:20',
|
||||||
}
|
waktu_recovery: '10/02/2023 21:42:37',
|
||||||
|
durasi_response_time: 4305,
|
||||||
|
durasi_recovery_time: 377,
|
||||||
|
id_unit_lama: 233,
|
||||||
|
nama_unit_lama: 'ULP PURWOKERTO KOTA',
|
||||||
|
id_unit_baru: 236,
|
||||||
|
nama_unit_baru: 'ULP BANJARNEGARA',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP EKO BUDIYANTO',
|
||||||
|
alamat_pelapor:
|
||||||
|
'ALAMAT LOKASI : DN TANJUNG TIRTA RT 5 RW 1 KEL DS TANJUNG TIRTA KEC PUNGGELAN KAB BANJARNEGARA JATENG, ACUAN LOKASI : DEKAT KELURAHAN',
|
||||||
|
no_telp_pelapor: '08121512224',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MOHON UNTUK DITINDAKLANJUTI PROSES PS NON PELANGGAN ( L/ 5500 VA ) MELALUI PLN 123 DENGAN NO AGENDA 522040132302100027 DAN NO REG 5220429004905 DIPERUNTUKAN UNTUK PENERANGAN BTS SELAMA 14 HARI MULAI PADA TGL 11/2/23 - 24/2/23 PUKUL 12:00 WIB PEMOHON MENGAKU SEBAGAI PIHAK YANG BERTANGGUNG JAWAB',
|
||||||
|
media: 'Call PLN 123'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423021005015',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '10/02/2023 18:01:21',
|
||||||
|
waktu_dialihkan: '10/02/2023 18:04:07',
|
||||||
|
waktu_response: '10/02/2023 18:13:47',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 746,
|
||||||
|
durasi_recovery_time: 33136328,
|
||||||
|
id_unit_lama: 227,
|
||||||
|
nama_unit_lama: 'ULP MEDAN SELATAN',
|
||||||
|
id_unit_baru: 225,
|
||||||
|
nama_unit_baru: 'ULP MEDAN KOTA',
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Ervina Vina4',
|
||||||
|
alamat_pelapor: 'JL PSR MERAH GG SETIA UJUNG KEL BINJAI No.0 RT.0 RW.0 M DENAI',
|
||||||
|
no_telp_pelapor: '6285276706679',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923021098935:app) - sudah beli token.tapi gagal terus tolong PLN tindak lanjutin lebih cepat.terima kasih',
|
||||||
|
media: 'PLN Mobile'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423021004276',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '10/02/2023 16:20:21',
|
||||||
|
waktu_dialihkan: '11/02/2023 06:28:29',
|
||||||
|
waktu_response: '11/02/2023 13:39:37',
|
||||||
|
waktu_recovery: '11/02/2023 16:28:03',
|
||||||
|
durasi_response_time: 76756,
|
||||||
|
durasi_recovery_time: 10106,
|
||||||
|
id_unit_lama: 62,
|
||||||
|
nama_unit_lama: 'ULP KAYU AGUNG',
|
||||||
|
id_unit_baru: 82,
|
||||||
|
nama_unit_baru: 'ULP TUGU MULYO',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'call center bmg',
|
||||||
|
alamat_pelapor:
|
||||||
|
'Desa Gading Raja Desa SP2 Kecamatan Padamaran Kabupaten Ogan Komering Ilir, Sumatera Selatan',
|
||||||
|
no_telp_pelapor: '6281225199487',
|
||||||
|
keterangan_pelapor: 'Seal in MCB KWH NA or Seal Papan OKA NA',
|
||||||
|
media: 'PLN Mobile'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423021001969',
|
||||||
|
pembuat_laporan: 'PLNMOBILE',
|
||||||
|
waktu_lapor: '10/02/2023 10:49:02',
|
||||||
|
waktu_dialihkan: '10/02/2023 10:53:35',
|
||||||
|
waktu_response: '10/02/2023 11:21:09',
|
||||||
|
waktu_recovery: '10/02/2023 12:15:16',
|
||||||
|
durasi_response_time: 1927,
|
||||||
|
durasi_recovery_time: 3247,
|
||||||
|
id_unit_lama: 238,
|
||||||
|
nama_unit_lama: 'UP3 TANJUNG PRIOK',
|
||||||
|
id_unit_baru: 194,
|
||||||
|
nama_unit_baru: 'UP3 BANDENGAN',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'muhammad alinafia',
|
||||||
|
alamat_pelapor: 'blok a no 55',
|
||||||
|
no_telp_pelapor: '6282123607797',
|
||||||
|
keterangan_pelapor: 'K5423021001925',
|
||||||
|
media: 'PLN Mobile'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type10 @update:filters="(value) => (filters = value)" />
|
<Type10 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loadingData == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -23,7 +22,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -44,12 +42,11 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -314,6 +311,7 @@
|
|||||||
:row-alternation-enabled="true"
|
:row-alternation-enabled="true"
|
||||||
:hover-state-enabled="true"
|
:hover-state-enabled="true"
|
||||||
@selection-changed="onDataSubSelectionChanged"
|
@selection-changed="onDataSubSelectionChanged"
|
||||||
|
@exporting="onExporting"
|
||||||
:allow-column-resizing="true"
|
:allow-column-resizing="true"
|
||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
>
|
>
|
||||||
@ -329,6 +327,11 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
|
<DxExport
|
||||||
|
:enabled="true"
|
||||||
|
:formats="['pdf', 'xlsx', 'document']"
|
||||||
|
:allow-export-selected-data="false"
|
||||||
|
/>
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column"
|
||||||
@ -412,8 +415,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loadingData || loadingSubData" />
|
||||||
<BufferDialog v-if="loadingSubData" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -421,42 +423,35 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type10 from '@/components/Form/FiltersType/Type10.vue'
|
import Type10 from '@/components/Form/FiltersType/Type10.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport, DxPager,
|
||||||
DxPager,
|
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
DxSelection,
|
DxSelection
|
||||||
DxLoadPanel
|
|
||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { formatNumber, isNumber } from '@/utils/numbers'
|
import { formatNumber, isNumber } from '@/utils/numbers'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
const data = ref<any[]>([])
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSub = ref<any[]>([])
|
const dataSub = ref<any[]>([])
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dataSubSelected = ref<any>()
|
const dataSubSelected = ref<any>()
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const closedialogDetail = () => (dialogDetail.value = false)
|
||||||
|
const loadingData = ref(false)
|
||||||
const loadingSubData = ref(false)
|
const loadingSubData = ref(false)
|
||||||
const detailType = ref('form')
|
const detailType = ref('form') // form, table
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
const reportMeta = ref({
|
const reportMeta = ref({
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
@ -467,154 +462,6 @@ const reportMeta = ref({
|
|||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(
|
|
||||||
queries.keluhan.daftar.ssdaftarKeluhanMelaporLebihDariSatuKali,
|
|
||||||
query
|
|
||||||
)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanMelaporLebihDariSatuKali
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const resetData = () => {
|
|
||||||
allowTableRequest.value = false
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (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
|
|
||||||
|
|
||||||
return {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const setDetailType = (columnCaption: string) => {
|
const setDetailType = (columnCaption: string) => {
|
||||||
if (columnCaption == 'Jml Lapor') {
|
if (columnCaption == 'Jml Lapor') {
|
||||||
detailType.value = 'table'
|
detailType.value = 'table'
|
||||||
@ -624,6 +471,7 @@ const setDetailType = (columnCaption: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getDetail = async () => {
|
const getDetail = async () => {
|
||||||
|
const dateValue = filters.value.periode.split(' s/d ')
|
||||||
const selected = dataSelected.value
|
const selected = dataSelected.value
|
||||||
|
|
||||||
const query = {
|
const query = {
|
||||||
@ -649,11 +497,11 @@ const getDetail = async () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const showDetail = () => {
|
const showDetail = () => {
|
||||||
clearSelection()
|
clearSelection()
|
||||||
dataSubSelected.value = null
|
dataSubSelected.value = null
|
||||||
@ -677,29 +525,152 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const closeDialog = () => (dialogDetail.value = false)
|
const closeDialog = () => (dialogDetail.value = false)
|
||||||
const onExporting = async (e: any) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
|
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
const onExporting = (e: any) => {
|
||||||
reportData.value = await data.load()
|
if (e.format === 'pdf') {
|
||||||
}
|
exportToPDF(reportMeta, data)
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const resetData = () => {
|
||||||
dataGrid.endCustomLoading()
|
data.value = []
|
||||||
|
dataSub.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filterData = async (params: any) => {
|
||||||
|
resetData()
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { ulp, uid, up3 } = params
|
||||||
|
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
|
||||||
|
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
|
||||||
|
|
||||||
|
const query = {
|
||||||
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loadingData.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanMelaporLebihDariSatuKali
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loadingData.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100003',
|
||||||
|
waktu_lapor: '01/02/2023 00:00:54',
|
||||||
|
waktu_response: '01/01/1970 00:00:00',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
durasi_response_time: -1675209654,
|
||||||
|
durasi_recovery_time: 1709189971,
|
||||||
|
status_akhir: 'Dalam Proses Manager Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'ROLLY DWI NOVIANDARU',
|
||||||
|
alamat_pelapor: 'TA MBAK BERAS RT1 CER No.ME RT.00 RW.00',
|
||||||
|
no_telp_pelapor: '6285785412365',
|
||||||
|
keterangan_pelapor: 'meter macet',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP BENJENG'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100006',
|
||||||
|
waktu_lapor: '01/02/2023 00:01:23',
|
||||||
|
waktu_response: '01/02/2023 00:01:59',
|
||||||
|
waktu_recovery: '01/02/2023 00:02:52',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
durasi_response_time: 36,
|
||||||
|
durasi_recovery_time: 53,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Doni',
|
||||||
|
alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
|
||||||
|
no_telp_pelapor: '62895391110909',
|
||||||
|
keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100022',
|
||||||
|
waktu_lapor: '01/02/2023 00:06:30',
|
||||||
|
waktu_response: '01/02/2023 04:26:02',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
durasi_response_time: 15572,
|
||||||
|
durasi_recovery_time: 33964409,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Yolanda Palar',
|
||||||
|
alamat_pelapor: 'JL TANGGUL SELATAN No.0',
|
||||||
|
no_telp_pelapor: '6285256607777',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187811:meteran terblokir) - Kilometer Terblokir, Listrik Padam, Vouchers tidak bisa diisi. informasi dari petugas Aplikasi harus ganti kilometer. saya Naikan Daya dari Agustus 2022 Terblokirnya Hari ini bagaimana ya?',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP PALU KOTA'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100028',
|
||||||
|
waktu_lapor: '01/02/2023 00:09:30',
|
||||||
|
waktu_response: '01/01/1970 00:00:00',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
durasi_response_time: -1675210170,
|
||||||
|
durasi_recovery_time: 1709189971,
|
||||||
|
status_akhir: 'Dalam Proses Manager Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Tisatin Najemi',
|
||||||
|
alamat_pelapor: 'JL ABADI 2 No. RT.47 RW.7 GT MANGGIS',
|
||||||
|
no_telp_pelapor: '6281349719849',
|
||||||
|
keterangan_pelapor: 'saya baru aja isi token listrik lewat bangking cuman gak mau masuk ',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP BANJARBARU'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100029',
|
||||||
|
waktu_lapor: '01/02/2023 00:09:39',
|
||||||
|
waktu_response: '01/02/2023 05:48:52',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
durasi_response_time: 20353,
|
||||||
|
durasi_recovery_time: 33959439,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'fris jhon ferni',
|
||||||
|
alamat_pelapor: 'the royal griya loka blok o no 05',
|
||||||
|
no_telp_pelapor: '62895396277717',
|
||||||
|
keterangan_pelapor: 'MUTASI_K (G9923020187825:tekmik) - token gagal masuk',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP TABANAN'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type11
|
<Type11
|
||||||
@update:filters="(value) => (filters = value)"
|
@update:filters="(value) => (filters = value)"
|
||||||
:sla-options="[
|
:sla-options="[
|
||||||
@ -22,11 +22,10 @@
|
|||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -39,7 +38,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -59,12 +57,11 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -286,6 +283,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -293,10 +291,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type11 from '@/components/Form/FiltersType/Type11.vue'
|
import Type11 from '@/components/Form/FiltersType/Type11.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -314,182 +310,24 @@ import {
|
|||||||
exportToDOCX,
|
exportToDOCX,
|
||||||
exportToXLSX
|
exportToXLSX
|
||||||
} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
|
} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
|
||||||
periode: '',
|
|
||||||
minTime: '',
|
|
||||||
maxTime: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanRecoveryTime, query)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanRecoveryTime
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const resetData = () => {
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
allowTableRequest.value = false
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
const { ulp, uid, up3, minTime, maxTime } = params
|
|
||||||
|
|
||||||
return {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const showDetail = () => {
|
const showDetail = () => {
|
||||||
clearSelection()
|
clearSelection()
|
||||||
dialogDetail.value = true
|
dialogDetail.value = true
|
||||||
@ -502,29 +340,159 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
showDetail()
|
showDetail()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
|
||||||
reportData.value = await data.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const data = ref<any[]>([])
|
||||||
dataGrid.endCustomLoading()
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const resetData = () => {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filterData = async (params: any) => {
|
||||||
|
resetData()
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { ulp, uid, up3, minTime, maxTime } = params
|
||||||
|
|
||||||
|
const query = {
|
||||||
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanRecoveryTime, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanRecoveryTime
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const filters = ref()
|
||||||
|
const reportMeta = ref({
|
||||||
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||||
|
periode: '',
|
||||||
|
minTime: '',
|
||||||
|
maxTime: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100006',
|
||||||
|
waktu_lapor: '01/02/2023 00:01:23',
|
||||||
|
waktu_response: '01/02/2023 00:01:59',
|
||||||
|
waktu_recovery: '01/02/2023 00:02:52',
|
||||||
|
durasi_response_time: 36,
|
||||||
|
durasi_recovery_time: 53,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Doni',
|
||||||
|
alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
|
||||||
|
no_telp_pelapor: '62895391110909',
|
||||||
|
keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100030',
|
||||||
|
waktu_lapor: '01/02/2023 00:10:39',
|
||||||
|
waktu_response: '01/02/2023 01:17:31',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 4012,
|
||||||
|
durasi_recovery_time: 33977641,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'wulan',
|
||||||
|
alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
|
||||||
|
no_telp_pelapor: '6285788900596',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP KUPANG'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100045',
|
||||||
|
waktu_lapor: '01/02/2023 00:16:57',
|
||||||
|
waktu_response: '01/02/2023 00:19:40',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 163,
|
||||||
|
durasi_recovery_time: 33981112,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'veri susanto',
|
||||||
|
alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
|
||||||
|
no_telp_pelapor: '6282150235722',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP SIANTAN'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100062',
|
||||||
|
waktu_lapor: '01/02/2023 00:29:48',
|
||||||
|
waktu_response: '01/02/2023 01:08:45',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 2337,
|
||||||
|
durasi_recovery_time: 33978167,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Diki wahyudi',
|
||||||
|
alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
|
||||||
|
no_telp_pelapor: '6285770967966',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP RENGASDENGKLOK'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100089',
|
||||||
|
waktu_lapor: '01/02/2023 00:45:30',
|
||||||
|
waktu_response: '01/02/2023 01:00:27',
|
||||||
|
waktu_recovery: '01/02/2023 07:53:08',
|
||||||
|
durasi_response_time: 897,
|
||||||
|
durasi_recovery_time: 24761,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'SAHABATJAKARTA',
|
||||||
|
alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
|
||||||
|
no_telp_pelapor: '6281210701126',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP BOGOR KOTA'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type11
|
<Type11
|
||||||
@update:filters="(value) => (filters = value)"
|
@update:filters="(value) => (filters = value)"
|
||||||
:sla-options="[
|
:sla-options="[
|
||||||
@ -22,11 +22,10 @@
|
|||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -39,7 +38,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -59,12 +57,11 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -304,6 +301,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -311,10 +309,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type11 from '@/components/Form/FiltersType/Type11.vue'
|
import Type11 from '@/components/Form/FiltersType/Type11.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -334,176 +330,18 @@ import {
|
|||||||
exportToDOCX
|
exportToDOCX
|
||||||
} from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
|
} from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
|
||||||
periode: '',
|
|
||||||
minTime: '',
|
|
||||||
maxTime: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanResponseTime, query)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanResponseTime
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const resetData = () => {
|
|
||||||
allowTableRequest.value = false
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
const { ulp, uid, up3, maxTime, minTime } = params
|
|
||||||
|
|
||||||
return {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
@ -520,29 +358,159 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
|
||||||
reportData.value = await data.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const data = ref<any[]>([])
|
||||||
dataGrid.endCustomLoading()
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const resetData = () => {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filterData = async (params: any) => {
|
||||||
|
resetData()
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { ulp, uid, up3, maxTime, minTime } = params
|
||||||
|
|
||||||
|
const query = {
|
||||||
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanResponseTime, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanResponseTime
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const filters = ref()
|
||||||
|
const reportMeta = ref({
|
||||||
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||||
|
periode: '',
|
||||||
|
minTime: '',
|
||||||
|
maxTime: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100006',
|
||||||
|
waktu_lapor: '01/02/2023 00:01:23',
|
||||||
|
waktu_response: '01/02/2023 00:01:59',
|
||||||
|
waktu_recovery: '01/02/2023 00:02:52',
|
||||||
|
durasi_response_time: 36,
|
||||||
|
durasi_recovery_time: 53,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Doni',
|
||||||
|
alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
|
||||||
|
no_telp_pelapor: '62895391110909',
|
||||||
|
keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100030',
|
||||||
|
waktu_lapor: '01/02/2023 00:10:39',
|
||||||
|
waktu_response: '01/02/2023 01:17:31',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 4012,
|
||||||
|
durasi_recovery_time: 33978014,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'wulan',
|
||||||
|
alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
|
||||||
|
no_telp_pelapor: '6285788900596',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP KUPANG'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100045',
|
||||||
|
waktu_lapor: '01/02/2023 00:16:57',
|
||||||
|
waktu_response: '01/02/2023 00:19:40',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 163,
|
||||||
|
durasi_recovery_time: 33981485,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'veri susanto',
|
||||||
|
alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
|
||||||
|
no_telp_pelapor: '6282150235722',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP SIANTAN'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100062',
|
||||||
|
waktu_lapor: '01/02/2023 00:29:48',
|
||||||
|
waktu_response: '01/02/2023 01:08:45',
|
||||||
|
waktu_recovery: '01/01/1970 00:00:00',
|
||||||
|
durasi_response_time: 2337,
|
||||||
|
durasi_recovery_time: 33978540,
|
||||||
|
status_akhir: 'Dalam Proses Bidang Unit',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Diki wahyudi',
|
||||||
|
alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
|
||||||
|
no_telp_pelapor: '6285770967966',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP RENGASDENGKLOK'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5423020100089',
|
||||||
|
waktu_lapor: '01/02/2023 00:45:30',
|
||||||
|
waktu_response: '01/02/2023 01:00:27',
|
||||||
|
waktu_recovery: '01/02/2023 07:53:08',
|
||||||
|
durasi_response_time: 897,
|
||||||
|
durasi_recovery_time: 24761,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'SAHABATJAKARTA',
|
||||||
|
alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
|
||||||
|
no_telp_pelapor: '6281210701126',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
|
||||||
|
media: 'PLN Mobile',
|
||||||
|
nama_ulp: 'ULP BOGOR KOTA'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => (filters = value)" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -23,7 +22,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -43,12 +41,11 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
@ -277,6 +274,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -284,10 +282,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
|
||||||
|
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { reactive, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -301,182 +297,24 @@ import {
|
|||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
|
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
|
||||||
const filters = ref()
|
|
||||||
const reportMeta = ref({
|
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
|
||||||
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
|
||||||
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
|
||||||
periode: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(
|
|
||||||
queries.keluhan.daftar.ssdaftarKeluhanSelesaiTanpaIdPelanggan,
|
|
||||||
query
|
|
||||||
)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanSelesaiTanpaIdPelanggan
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const resetData = () => {
|
|
||||||
allowTableRequest.value = false
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
|
||||||
if (e.name === 'searchPanel') {
|
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
|
||||||
const { ulp, uid, up3 } = params
|
|
||||||
|
|
||||||
return {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeDialog = () => {
|
const closeDialog = () => {
|
||||||
dialogDetail.value = false
|
dialogDetail.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
const clearSelection = () => {
|
const clearSelection = () => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
dataGrid.clearSelection()
|
dataGrid.clearSelection()
|
||||||
}
|
}
|
||||||
|
|
||||||
const showDetail = () => {
|
const showDetail = () => {
|
||||||
clearSelection()
|
clearSelection()
|
||||||
dialogDetail.value = true
|
dialogDetail.value = true
|
||||||
@ -489,29 +327,159 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|||||||
showDetail()
|
showDetail()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = async (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
|
||||||
reportData.value = await data.load()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
|
||||||
dataGrid.beginCustomLoading('')
|
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
|
||||||
|
|
||||||
if (pdf) {
|
|
||||||
dataGrid.endCustomLoading()
|
|
||||||
}
|
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta, e)
|
exportToXLSX(reportMeta, e)
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
} else {
|
||||||
dataGrid.beginCustomLoading('')
|
exportToDOCX(reportMeta, data)
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (doc) {
|
const data = ref<any[]>([])
|
||||||
dataGrid.endCustomLoading()
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const resetData = () => {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filterData = async (params: any) => {
|
||||||
|
resetData()
|
||||||
|
const dateValue = params.periode.split(' s/d ')
|
||||||
|
const { ulp, uid, up3 } = params
|
||||||
|
|
||||||
|
const query = {
|
||||||
|
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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanSelesaiTanpaIdPelanggan
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
|
reportMeta.value = filters.value
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const filters = ref()
|
||||||
|
const reportMeta = ref({
|
||||||
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
|
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
|
||||||
|
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
|
||||||
|
periode: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
data.value = [
|
||||||
|
{
|
||||||
|
no_laporan: 'K5123020100019',
|
||||||
|
waktu_lapor: '01/02/2023 01:59:02',
|
||||||
|
waktu_response: '01/02/2023 05:22:50',
|
||||||
|
waktu_recovery: '01/02/2023 08:33:38',
|
||||||
|
durasi_response_time: 12228,
|
||||||
|
durasi_recovery_time: 11448,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP AHMAD',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
|
||||||
|
no_telp_pelapor: '082320000152',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_ulp: 'UP3 TANJUNG PRIOK'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5123020100021',
|
||||||
|
waktu_lapor: '01/02/2023 02:04:04',
|
||||||
|
waktu_response: '01/02/2023 02:26:01',
|
||||||
|
waktu_recovery: '01/02/2023 02:34:06',
|
||||||
|
durasi_response_time: 1317,
|
||||||
|
durasi_recovery_time: 485,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'IBU TITIN ',
|
||||||
|
alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
|
||||||
|
no_telp_pelapor: '087786974290',
|
||||||
|
keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_ulp: 'ULP CIBITUNG'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100112',
|
||||||
|
waktu_lapor: '01/02/2023 04:16:48',
|
||||||
|
waktu_response: '01/02/2023 05:58:33',
|
||||||
|
waktu_recovery: '01/02/2023 12:02:23',
|
||||||
|
durasi_response_time: 6105,
|
||||||
|
durasi_recovery_time: 21830,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP HENDRIYANTO',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
|
||||||
|
no_telp_pelapor: '085921182228',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
|
||||||
|
media: 'Live Chat PLN Mobile',
|
||||||
|
nama_ulp: 'ULP SEDAYU'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100116',
|
||||||
|
waktu_lapor: '01/02/2023 04:43:43',
|
||||||
|
waktu_response: '01/02/2023 08:06:28',
|
||||||
|
waktu_recovery: '01/02/2023 08:52:05',
|
||||||
|
durasi_response_time: 12165,
|
||||||
|
durasi_recovery_time: 2737,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP SELAMET',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL MUARA TAKUS NO.30 - RT- / RW- KEL MADRASHULU KEC MEDAN KOLONIA KOTA MEDAN > LOKASI BELAKANG SAN PLASA',
|
||||||
|
no_telp_pelapor: '0614510290',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'LEBIH TAGIH . STAND AKHIR REK JANUARI, 2023 =19583, STAND APP 01/02/2023 = 16677,NOTE: PETUGAS CATER SELALU MENGINFORMASIKAN UNTUK LISTRIK AKAN DIGANTI KE BISNIS, PELANGGAN INGIN MENGETAHUI MAKSUD DAN TUJUAN, PETUGAS CATER DIJANJIKAN UNTUK MELAKUKAN PERGANTIAN KWH METER BARU NAMUN JUGA TIDAK DIREALISASI.',
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_ulp: 'ULP MEDAN KOTA'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100119',
|
||||||
|
waktu_lapor: '01/02/2023 04:48:12',
|
||||||
|
waktu_response: '01/02/2023 07:34:08',
|
||||||
|
waktu_recovery: '01/02/2023 11:50:28',
|
||||||
|
durasi_response_time: 9956,
|
||||||
|
durasi_recovery_time: 15380,
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'Febry Cahjagraha_',
|
||||||
|
alamat_pelapor:
|
||||||
|
' JL PISANG GG.TALOK 3 SAREN NO., CATURTUNGGAL, DEPOK, KAB. SLEMAN, DAERAH ISTIMEWA YOGYAKARTA',
|
||||||
|
no_telp_pelapor: '089611011990',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'PELANGGAN MENGAJUKAN PROSES TURUN DAYA (R2T/3500 VA - R1T/1300 VA) MELALUI APLIKASI PLN MOBILE DENGAN STATUS PERMOHONAN MENUNGGU VERIFIKASI PLN UNIT DAN STATUS PADA AP2T PERMOHONAN BELUM DISAHKAN MANAGER. YBS INGIN SEGERA DAPAT DITINDAKLANJUTI.',
|
||||||
|
media: 'Facebook',
|
||||||
|
nama_ulp: 'ULP YOGYAKARTA KOTA'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
|
||||||
<Type3 @update:filters="(value) => (filters = value)" />
|
<Type3 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="dataGridRef"
|
ref="dataGridRef"
|
||||||
@option-changed="handleRequestChange"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
:remote-operations="true"
|
v-if="loading == false"
|
||||||
:show-column-lines="true"
|
:show-column-lines="true"
|
||||||
:show-row-lines="false"
|
:show-row-lines="false"
|
||||||
:show-borders="true"
|
:show-borders="true"
|
||||||
@ -23,7 +22,6 @@
|
|||||||
column-resizing-mode="widget"
|
column-resizing-mode="widget"
|
||||||
:word-wrap-enabled="false"
|
:word-wrap-enabled="false"
|
||||||
>
|
>
|
||||||
<DxLoadPanel :enabled="true" />
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager
|
||||||
@ -43,13 +41,13 @@
|
|||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:allow-sorting="false"
|
css-class="custom-table-column !align-top"
|
||||||
css-class="custom-table-column !text-right"
|
|
||||||
:width="50"
|
:width="50"
|
||||||
alignment="center"
|
alignment="center"
|
||||||
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
data-type="number"
|
data-type="number"
|
||||||
data-field="no"
|
|
||||||
caption="No"
|
caption="No"
|
||||||
|
cell-template="formatNumber"
|
||||||
/>
|
/>
|
||||||
<DxColumn
|
<DxColumn
|
||||||
:width="170"
|
:width="170"
|
||||||
@ -296,6 +294,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
<BufferDialog v-if="loading" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -303,9 +302,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
|||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||||
import CustomStore from 'devextreme/data/custom_store'
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
import { reactive, ref } from 'vue'
|
|
||||||
import { DxDataGrid } from 'devextreme-vue'
|
import { DxDataGrid } from 'devextreme-vue'
|
||||||
import {
|
import {
|
||||||
DxColumn,
|
DxColumn,
|
||||||
@ -320,20 +317,48 @@ import {
|
|||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||||
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
|
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
|
||||||
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
import type { IRequestOptions } from '@/types/requestParams'
|
const position = { of: '#data' }
|
||||||
|
const showIndicator = ref(true)
|
||||||
const requestOptions = reactive<IRequestOptions>({
|
const shading = ref(true)
|
||||||
skip: 0,
|
const showPane = ref(true)
|
||||||
take: 20,
|
|
||||||
requireTotalCount: true,
|
|
||||||
sort: null,
|
|
||||||
filter: null
|
|
||||||
})
|
|
||||||
const dataSelected = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const dialogDetail = ref(false)
|
const dialogDetail = ref(false)
|
||||||
const reportData: any = ref(null)
|
|
||||||
|
const closeDialog = () => {
|
||||||
|
dialogDetail.value = false
|
||||||
|
}
|
||||||
|
|
||||||
const dataGridRef = ref<DxDataGrid | null>(null)
|
const dataGridRef = ref<DxDataGrid | null>(null)
|
||||||
|
const clearSelection = () => {
|
||||||
|
const dataGrid = dataGridRef.value!.instance!
|
||||||
|
dataGrid.clearSelection()
|
||||||
|
}
|
||||||
|
const showDetail = () => {
|
||||||
|
clearSelection()
|
||||||
|
dialogDetail.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
if (selectedRowsData[0] != undefined) {
|
||||||
|
dataSelected.value = selectedRowsData[0]
|
||||||
|
showDetail()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onExporting = (e: any) => {
|
||||||
|
if (e.format === 'pdf') {
|
||||||
|
exportToPDF(reportMeta, data)
|
||||||
|
} else if (e.format === 'xlsx') {
|
||||||
|
exportToXLSX(reportMeta, e)
|
||||||
|
} else {
|
||||||
|
exportToDOCX(reportMeta, data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = ref<any[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
const filters = ref()
|
const filters = ref()
|
||||||
const reportMeta = ref({
|
const reportMeta = ref({
|
||||||
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
|
||||||
@ -342,135 +367,16 @@ const reportMeta = ref({
|
|||||||
periode: ''
|
periode: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const allowTableRequest = ref(false)
|
|
||||||
const data = new CustomStore({
|
|
||||||
load: async (loadOptions: any) => {
|
|
||||||
if (allowTableRequest.value) {
|
|
||||||
loadOptions.requireTotalCount = true
|
|
||||||
|
|
||||||
const query = {
|
|
||||||
skip: loadOptions.skip,
|
|
||||||
take: loadOptions.take,
|
|
||||||
sort: loadOptions.sort ? loadOptions.sort : null,
|
|
||||||
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
|
|
||||||
requireTotalCount: loadOptions.requireTotalCount,
|
|
||||||
...createQuery(filters.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanDiselesaikanCC123, query)
|
|
||||||
.then((result) => {
|
|
||||||
const response = result.data.data.ssdaftarKeluhanDiselesaikanCC123
|
|
||||||
|
|
||||||
let no = query.skip ?? 0
|
|
||||||
|
|
||||||
for (const data of response.data) {
|
|
||||||
data.no = ++no
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
data: response.data,
|
|
||||||
totalCount: response.totalCount
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
throw Error(err)
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
reportMeta.value = filters.value
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return new Promise(function (resolve) {
|
|
||||||
resolve({
|
|
||||||
data: [],
|
|
||||||
totalCount: 0
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
allowTableRequest.value = false
|
data.value = []
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRequestChange = (e: any) => {
|
const filterData = async (params: any) => {
|
||||||
if (e.name === 'searchPanel') {
|
resetData()
|
||||||
if (e.value !== '') {
|
|
||||||
requestOptions.filter = createSearchOptions(e.value)
|
|
||||||
} else {
|
|
||||||
requestOptions.filter = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'paging') {
|
|
||||||
requestOptions.take = e.value
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.name === 'columns') {
|
|
||||||
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
|
|
||||||
const columnDataField = e.component.columnOption(columnIndex).dataField
|
|
||||||
|
|
||||||
requestOptions.sort = [
|
|
||||||
{
|
|
||||||
selector: columnDataField,
|
|
||||||
desc: e.value === 'desc'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSearchOptions = (keyword: string) => {
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const columns = dataGrid.getVisibleColumns()
|
|
||||||
|
|
||||||
const searchOptions = []
|
|
||||||
|
|
||||||
for (const column of columns) {
|
|
||||||
if (column.dataField === 'no' || !column.dataField) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
searchOptions.push({
|
|
||||||
field: column.dataField,
|
|
||||||
value: keyword
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return searchOptions
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapSearchOptions = (searchOptions: any) => {
|
|
||||||
const result = searchOptions.map((option: any) => {
|
|
||||||
if (Array.isArray(option) && option[0] !== 'no') {
|
|
||||||
return {
|
|
||||||
field: option[0],
|
|
||||||
value: option[2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return result.filter((item: any) => item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterData = () => {
|
|
||||||
allowTableRequest.value = true
|
|
||||||
|
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
|
||||||
const dataGridDataSource = dataGrid.getDataSource()
|
|
||||||
|
|
||||||
dataGridDataSource.reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const createQuery = (params: any) => {
|
|
||||||
const dateValue = params.periode.split(' s/d ')
|
const dateValue = params.periode.split(' s/d ')
|
||||||
const { ulp, uid, up3 } = params
|
const { ulp, uid, up3 } = params
|
||||||
|
|
||||||
return {
|
const query = {
|
||||||
dateFrom: dateValue[0]
|
dateFrom: dateValue[0]
|
||||||
? dateValue[0].split('-').reverse().join('-')
|
? dateValue[0].split('-').reverse().join('-')
|
||||||
: new Date().toISOString().slice(0, 10),
|
: new Date().toISOString().slice(0, 10),
|
||||||
@ -482,52 +388,147 @@ const createQuery = (params: any) => {
|
|||||||
idUp3: up3 ? up3.id : 0,
|
idUp3: up3 ? up3.id : 0,
|
||||||
media: ''
|
media: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
await requestGraphQl(queries.keluhan.daftar.keluhanDiselesaikanCC123, query)
|
||||||
|
.then((result) => {
|
||||||
|
if (result.data.data != undefined) {
|
||||||
|
data.value = result.data.data.daftarKeluhanDiselesaikanCC123
|
||||||
|
} else {
|
||||||
|
data.value = []
|
||||||
}
|
}
|
||||||
|
|
||||||
const clearSelection = () => {
|
reportMeta.value = filters.value
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
})
|
||||||
dataGrid.clearSelection()
|
.catch((err) => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
onMounted(() => {
|
||||||
if (selectedRowsData[0] != undefined) {
|
if (import.meta.env.DEV) {
|
||||||
dataSelected.value = selectedRowsData[0]
|
data.value = [
|
||||||
showDetail()
|
{
|
||||||
}
|
no_laporan: 'K5123020100019',
|
||||||
}
|
id_uid: 2,
|
||||||
|
nama_uid: 'DISTRIBUSI JAKARTA RAYA',
|
||||||
const closeDialog = () => {
|
id_up3: 13,
|
||||||
dialogDetail.value = false
|
nama_up3: 'UP3 TANJUNG PRIOK',
|
||||||
}
|
id_ulp: 54510,
|
||||||
|
nama_ulp: 'UP3 TANJUNG PRIOK',
|
||||||
const showDetail = () => {
|
idpel_nometer: '',
|
||||||
clearSelection()
|
nama_pelapor: 'BP AHMAD',
|
||||||
dialogDetail.value = true
|
alamat_pelapor:
|
||||||
}
|
'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
|
||||||
|
no_telp_pelapor: '082320000152',
|
||||||
const onExporting = async (e: any) => {
|
keterangan_pelapor:
|
||||||
const dataGrid = dataGridRef.value!.instance!
|
'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
if (e.format === 'pdf' || e.format === 'document') {
|
pembuat_laporan: 'CC.51.NUGROHO',
|
||||||
reportData.value = await data.load()
|
waktu_lapor: '01/02/2023 01:59:02',
|
||||||
}
|
waktu_recovery: '01/02/2023 08:33:38',
|
||||||
|
jumlah_lapor: 1,
|
||||||
if (e.format === 'pdf' && reportData.value) {
|
media: 'Call PLN 123',
|
||||||
dataGrid.beginCustomLoading('')
|
nama_issuetype: 'Informasi',
|
||||||
const pdf = await exportToPDF(reportMeta, reportData)
|
nama_subissuetype: 'PB '
|
||||||
|
},
|
||||||
if (pdf) {
|
{
|
||||||
dataGrid.endCustomLoading()
|
no_laporan: 'K5123020100021',
|
||||||
}
|
id_uid: 427,
|
||||||
} else if (e.format === 'xlsx') {
|
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||||
exportToXLSX(reportMeta, e)
|
id_up3: 547,
|
||||||
} else if (e.format === 'document' && reportData.value) {
|
nama_up3: 'UP3 CIKARANG',
|
||||||
dataGrid.beginCustomLoading('')
|
id_ulp: 53702,
|
||||||
const doc = await exportToDOCX(reportMeta, reportData)
|
nama_ulp: 'ULP CIBITUNG',
|
||||||
|
idpel_nometer: '',
|
||||||
if (doc) {
|
nama_pelapor: 'IBU TITIN ',
|
||||||
dataGrid.endCustomLoading()
|
alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
|
||||||
}
|
no_telp_pelapor: '087786974290',
|
||||||
|
keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
pembuat_laporan: 'CC.51.BARIQI',
|
||||||
|
waktu_lapor: '01/02/2023 02:04:04',
|
||||||
|
waktu_recovery: '01/02/2023 02:34:06',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_issuetype: 'Tagihan Listrik dan Token ',
|
||||||
|
nama_subissuetype: 'Tidak bisa beli Token '
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K1423020100022',
|
||||||
|
id_uid: 427,
|
||||||
|
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||||
|
id_up3: 532,
|
||||||
|
nama_up3: 'UP3 BEKASI',
|
||||||
|
id_ulp: 53741,
|
||||||
|
nama_ulp: 'ULP BANTARGEBANG',
|
||||||
|
idpel_nometer: '000000000000000001820788',
|
||||||
|
nama_pelapor: 'IBU IRFI ',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL NIAGA 7 PERUM KEMANG BLOK F NO 23 KEC RAWA LUMBU KEL SEPANJANG JAYA KOTA BEKASI ACUAN LOKASI DEKAT RUMAH YATIM ',
|
||||||
|
no_telp_pelapor: '62816922683',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43 (PTL TIDAK PADAM) \\nDENGAN NO METER 56700750112 DAN SISA KWH 15.1',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
pembuat_laporan: 'CC.14.ANDI',
|
||||||
|
waktu_lapor: '01/02/2023 03:13:25',
|
||||||
|
waktu_recovery: '01/02/2023 07:03:37',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
media: 'Call PLN 123',
|
||||||
|
nama_issuetype: 'Tagihan Listrik dan Token ',
|
||||||
|
nama_subissuetype: 'Gagal Input Token'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100106',
|
||||||
|
id_uid: 427,
|
||||||
|
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||||
|
id_up3: 537,
|
||||||
|
nama_up3: 'UP3 CIREBON',
|
||||||
|
id_ulp: 53331,
|
||||||
|
nama_ulp: 'ULP SUMBER',
|
||||||
|
idpel_nometer: '000000000000000000943441',
|
||||||
|
nama_pelapor: 'IBU MELLY KURNIASIH',
|
||||||
|
alamat_pelapor: 'PERUMAHAN CEMPAKA ARUM JL. FLAMBOYAN 5 NO 191 CIREBON',
|
||||||
|
no_telp_pelapor: '08889353988',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'LEBIH TAGIH. ST AK REK FEB 2023 (28/01/2023) = 4608, ST APP TGL 26/01/2023 = 4496. REK BELUM DILUNASI. (RUMAH TIDAK DIHUNI NAMUN PAGAR TIDAK TERKUNCI, PETUGAS TIDAK DIKETAHUI DATANG KE LOKASI). PELANGGAN MENGINGINKAN AGAR HAL TERSEBUT TIDAK TERULANG KEMBALI.',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
pembuat_laporan: 'CC.52.YORDAN.LC',
|
||||||
|
waktu_lapor: '01/02/2023 03:45:58',
|
||||||
|
waktu_recovery: '01/02/2023 06:28:11',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
media: 'Live Chat PLN Mobile',
|
||||||
|
nama_issuetype: 'Cater',
|
||||||
|
nama_subissuetype: 'Keakuratan hasil catat meter '
|
||||||
|
},
|
||||||
|
{
|
||||||
|
no_laporan: 'K5223020100112',
|
||||||
|
id_uid: 101,
|
||||||
|
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
|
||||||
|
id_up3: 52100,
|
||||||
|
nama_up3: 'UP3 YOGYAKARTA',
|
||||||
|
id_ulp: 52104,
|
||||||
|
nama_ulp: 'ULP SEDAYU',
|
||||||
|
idpel_nometer: '',
|
||||||
|
nama_pelapor: 'BP HENDRIYANTO',
|
||||||
|
alamat_pelapor:
|
||||||
|
'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
|
||||||
|
no_telp_pelapor: '085921182228',
|
||||||
|
keterangan_pelapor:
|
||||||
|
'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
|
||||||
|
status_akhir: 'Selesai',
|
||||||
|
pembuat_laporan: 'CC.52.YORDAN.LC',
|
||||||
|
waktu_lapor: '01/02/2023 04:16:48',
|
||||||
|
waktu_recovery: '01/02/2023 12:02:23',
|
||||||
|
jumlah_lapor: 1,
|
||||||
|
media: 'Live Chat PLN Mobile',
|
||||||
|
nama_issuetype: 'Tagihan Listrik dan Token ',
|
||||||
|
nama_subissuetype: 'Gagal Input Token'
|
||||||
}
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -46,13 +46,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -135,7 +134,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Keterangan Media'
|
'Keterangan Media'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.nama_pelapor,
|
item.nama_pelapor,
|
||||||
@ -202,19 +201,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -277,11 +269,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('H7:J7')
|
worksheet.mergeCells('H7:J7')
|
||||||
worksheet.mergeCells('H8:J8')
|
worksheet.mergeCells('H8:J8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 10, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -291,16 +286,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -548,17 +542,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -48,13 +48,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -134,7 +133,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.pembuat_laporan,
|
item.pembuat_laporan,
|
||||||
@ -205,19 +204,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -270,11 +262,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A6:S6')
|
worksheet.mergeCells('A6:S6')
|
||||||
worksheet.mergeCells('A7:S7')
|
worksheet.mergeCells('A7:S7')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 10, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -284,16 +279,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -536,17 +530,11 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
console.log(blob)
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -46,13 +46,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -128,7 +127,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -195,19 +194,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -260,11 +252,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('H7:J7')
|
worksheet.mergeCells('H7:J7')
|
||||||
worksheet.mergeCells('H8:J8')
|
worksheet.mergeCells('H8:J8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 10, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -274,16 +269,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -518,17 +512,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -46,13 +46,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -130,7 +129,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -198,19 +197,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -269,11 +261,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('H7:J7')
|
worksheet.mergeCells('H7:J7')
|
||||||
worksheet.mergeCells('H8:J8')
|
worksheet.mergeCells('H8:J8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 11, column: 1 }
|
topLeftCell: { row: 11, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -283,16 +278,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -538,17 +532,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -64,13 +64,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -151,7 +150,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -218,19 +217,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
|
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
@ -290,11 +282,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('H7:J7')
|
worksheet.mergeCells('H7:J7')
|
||||||
worksheet.mergeCells('H8:J8')
|
worksheet.mergeCells('H8:J8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 11, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -304,16 +299,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -559,17 +553,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -64,13 +64,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -151,7 +150,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -218,19 +217,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
|
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
@ -290,11 +282,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('H7:J7')
|
worksheet.mergeCells('H7:J7')
|
||||||
worksheet.mergeCells('H8:J8')
|
worksheet.mergeCells('H8:J8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 11, column: 1 }
|
topLeftCell: { row: 11, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -304,16 +299,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -559,17 +553,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -46,13 +46,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -128,7 +127,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Posko'
|
'Posko'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -195,19 +194,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, data: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -260,11 +252,14 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('H7:J7')
|
worksheet.mergeCells('H7:J7')
|
||||||
worksheet.mergeCells('H8:J8')
|
worksheet.mergeCells('H8:J8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 10, column: 1 },
|
||||||
|
loadPanel: {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -274,16 +269,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -518,17 +512,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -48,13 +48,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -130,7 +129,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Keterangan Media'
|
'Keterangan Media'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.nama_pelapor,
|
item.nama_pelapor,
|
||||||
@ -197,19 +196,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -262,11 +254,11 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A6:O6')
|
worksheet.mergeCells('A6:O6')
|
||||||
worksheet.mergeCells('A7:O7')
|
worksheet.mergeCells('A7:O7')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 9, column: 1 }
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -276,16 +268,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -520,17 +511,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -48,13 +48,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -134,7 +133,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Nama ULP'
|
'Nama ULP'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.pembuat_laporan,
|
item.pembuat_laporan,
|
||||||
@ -205,19 +204,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -270,11 +262,11 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A6:S6')
|
worksheet.mergeCells('A6:S6')
|
||||||
worksheet.mergeCells('A7:S7')
|
worksheet.mergeCells('A7:S7')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 9, column: 1 }
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -284,16 +276,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -536,17 +527,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -48,13 +48,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -132,7 +131,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Nama ULP'
|
'Nama ULP'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -200,19 +199,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -272,7 +264,7 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A7:P7')
|
worksheet.mergeCells('A7:P7')
|
||||||
worksheet.mergeCells('A8:P8')
|
worksheet.mergeCells('A8:P8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
@ -286,16 +278,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -541,17 +532,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -59,13 +59,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -145,7 +144,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Nama ULP'
|
'Nama ULP'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -211,19 +210,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -283,7 +275,7 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A7:N7')
|
worksheet.mergeCells('A7:N7')
|
||||||
worksheet.mergeCells('A8:N8')
|
worksheet.mergeCells('A8:N8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
@ -297,16 +289,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -548,17 +539,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -59,13 +59,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -145,7 +144,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Nama ULP'
|
'Nama ULP'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -211,19 +210,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -283,7 +275,7 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A7:N7')
|
worksheet.mergeCells('A7:N7')
|
||||||
worksheet.mergeCells('A8:N8')
|
worksheet.mergeCells('A8:N8')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
@ -297,16 +289,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -548,17 +539,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -48,13 +48,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -130,7 +129,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Nama ULP'
|
'Nama ULP'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.waktu_lapor,
|
item.waktu_lapor,
|
||||||
@ -197,19 +196,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -262,11 +254,11 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A6:O6')
|
worksheet.mergeCells('A6:O6')
|
||||||
worksheet.mergeCells('A7:O7')
|
worksheet.mergeCells('A7:O7')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 9, column: 1 }
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -276,16 +268,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -520,17 +511,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -48,13 +48,12 @@ const formatMetaData = (reportMeta: any) => {
|
|||||||
return { dateFromFormat, dateToFormat, dayTo }
|
return { dateFromFormat, dateToFormat, dayTo }
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToPDF = async (reportMeta: any, data: any) => {
|
const exportToPDF = (reportMeta: any, data: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const resultData = data.value.data
|
|
||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
@ -132,7 +131,7 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
'Sub Issue Type'
|
'Sub Issue Type'
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
body: resultData.map((item: any, i: any) => [
|
body: data.value.map((item: any, i: any) => [
|
||||||
{ content: ++i, styles: { halign: 'right' } },
|
{ content: ++i, styles: { halign: 'right' } },
|
||||||
item.no_laporan,
|
item.no_laporan,
|
||||||
item.nama_ulp,
|
item.nama_ulp,
|
||||||
@ -201,19 +200,12 @@ const exportToPDF = async (reportMeta: any, data: any) => {
|
|||||||
margin: { left: 230 }
|
margin: { left: 230 }
|
||||||
})
|
})
|
||||||
|
|
||||||
await doc
|
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
|
||||||
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
|
console.log('pdf berhasil disimpan')
|
||||||
.then(() => {
|
|
||||||
console.log('PDF Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting PDF', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToXLSX = async (reportMeta: any, e: any) => {
|
const exportToXLSX = (reportMeta: any, e: any) => {
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const workbook = new Workbook()
|
const workbook = new Workbook()
|
||||||
const worksheet = workbook.addWorksheet(`${reportName}`)
|
const worksheet = workbook.addWorksheet(`${reportName}`)
|
||||||
@ -266,11 +258,11 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
worksheet.mergeCells('A6:Q6')
|
worksheet.mergeCells('A6:Q6')
|
||||||
worksheet.mergeCells('A7:Q7')
|
worksheet.mergeCells('A7:Q7')
|
||||||
|
|
||||||
await exportToExcel({
|
exportToExcel({
|
||||||
component: e.component,
|
component: e.component,
|
||||||
worksheet,
|
worksheet,
|
||||||
autoFilterEnabled: true,
|
autoFilterEnabled: true,
|
||||||
topLeftCell: { row: 10, column: 1 }
|
topLeftCell: { row: 9, column: 1 }
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
workbook.xlsx.writeBuffer().then((buffer: any) => {
|
||||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
|
||||||
@ -280,16 +272,15 @@ const exportToXLSX = async (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const exportToDOCX = async (reportMeta: any, data: any) => {
|
const exportToDOCX = (reportMeta: any, data: any) => {
|
||||||
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
|
||||||
const date = new Date().getDate()
|
const date = new Date().getDate()
|
||||||
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
const month = new Date().toLocaleString('id-ID', { month: 'long' })
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const meta = formatMetaData(reportMeta)
|
const meta = formatMetaData(reportMeta)
|
||||||
const resultData = data.value.data
|
|
||||||
|
|
||||||
const generateRows = () => {
|
const generateRows = () => {
|
||||||
return resultData.map((item: any, i: any) => {
|
return data.value.map((item: any, i: any) => {
|
||||||
return new TableRow({
|
return new TableRow({
|
||||||
children: [
|
children: [
|
||||||
{ text: `${++i}`, field: 'no' },
|
{ text: `${++i}`, field: 'no' },
|
||||||
@ -518,17 +509,10 @@ const exportToDOCX = async (reportMeta: any, data: any) => {
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
await Packer.toBlob(doc)
|
Packer.toBlob(doc).then((blob) => {
|
||||||
.then((blob) => {
|
|
||||||
saveAs(blob, `Laporan ${reportName}.docx`)
|
saveAs(blob, `Laporan ${reportName}.docx`)
|
||||||
|
console.log('Document created successfully')
|
||||||
console.log('DOCX Exported')
|
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
|
||||||
console.error('Error while exporting DOCX', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { exportToPDF, exportToXLSX, exportToDOCX }
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -64,7 +64,6 @@ export const useAuthStore = defineStore('auth', () => {
|
|||||||
type: 'success'
|
type: 'success'
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(filterPresets.value)
|
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
} else {
|
} else {
|
||||||
dispatchNotification({
|
dispatchNotification({
|
||||||
|
|||||||
@ -1,9 +0,0 @@
|
|||||||
interface IRequestOptions {
|
|
||||||
skip: number
|
|
||||||
take: number
|
|
||||||
requireTotalCount: boolean
|
|
||||||
sort: null | Array<object>
|
|
||||||
filter: null | Array<object>
|
|
||||||
}
|
|
||||||
|
|
||||||
export type { IRequestOptions }
|
|
||||||
@ -51,51 +51,6 @@ export const apolloClient = () => {
|
|||||||
export const queries = {
|
export const queries = {
|
||||||
keluhan: {
|
keluhan: {
|
||||||
daftar: {
|
daftar: {
|
||||||
ssdaftarKeluhanSelesaiTanpaIdPelanggan: gql`
|
|
||||||
query ssdaftarKeluhanSelesaiTanpaIdPelanggan(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanSelesaiTanpaIdPelanggan(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_ulp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
keluhanSelesaiTanpaIDPelanggan: gql`
|
keluhanSelesaiTanpaIDPelanggan: gql`
|
||||||
query daftarKeluhanSelesaiTanpaIdPelanggan(
|
query daftarKeluhanSelesaiTanpaIdPelanggan(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -128,59 +83,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarKeluhanDiselesaikanCC123: gql`
|
|
||||||
query ssdaftarKeluhanDiselesaikanCC123(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$media: String!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanDiselesaikanCC123(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
media: $media
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
id_uid
|
|
||||||
nama_uid
|
|
||||||
id_up3
|
|
||||||
nama_up3
|
|
||||||
id_ulp
|
|
||||||
nama_ulp
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
status_akhir
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_recovery
|
|
||||||
jumlah_lapor
|
|
||||||
media
|
|
||||||
nama_issuetype
|
|
||||||
nama_subissuetype
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
keluhanDiselesaikanCC123: gql`
|
keluhanDiselesaikanCC123: gql`
|
||||||
query daftarKeluhanDiselesaikanCC123(
|
query daftarKeluhanDiselesaikanCC123(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -221,55 +123,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarKeluhanResponseTime: gql`
|
|
||||||
query ssdaftarKeluhanResponseTime(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$minDurasiResponseTime: Int!
|
|
||||||
$maxDurasiResponseTime: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanResponseTime(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
minDurasiResponseTime: $minDurasiResponseTime
|
|
||||||
maxDurasiResponseTime: $maxDurasiResponseTime
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_ulp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
keluhanResponseTime: gql`
|
keluhanResponseTime: gql`
|
||||||
query daftarKeluhanResponseTime(
|
query daftarKeluhanResponseTime(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -306,55 +159,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarKeluhanRecoveryTime: gql`
|
|
||||||
query ssdaftarKeluhanRecoveryTime(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$minDurasiRecoveryTime: Int!
|
|
||||||
$maxDurasiRecoveryTime: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanRecoveryTime(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
minDurasiRecoveryTime: $minDurasiRecoveryTime
|
|
||||||
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_ulp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
keluhanRecoveryTime: gql`
|
keluhanRecoveryTime: gql`
|
||||||
query daftarKeluhanRecoveryTime(
|
query daftarKeluhanRecoveryTime(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -402,56 +206,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarKeluhanMelaporLebihDariSatuKali: gql`
|
|
||||||
query ssdaftarKeluhanMelaporLebihDariSatuKali(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$minJmlLapor: Int!
|
|
||||||
$maxJmlLapor: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanMelaporLebihDariSatuKali(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
minJmlLapor: $minJmlLapor
|
|
||||||
maxJmlLapor: $maxJmlLapor
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
jumlah_lapor
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_ulp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
keluhanMelaporLebihDariSatuKali: gql`
|
keluhanMelaporLebihDariSatuKali: gql`
|
||||||
query daftarKeluhanMelaporLebihDariSatuKali(
|
query daftarKeluhanMelaporLebihDariSatuKali(
|
||||||
$minJmlLapor: Int!
|
$minJmlLapor: Int!
|
||||||
@ -526,103 +280,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarKeluhanDialihkanKeUnitLain: gql`
|
|
||||||
query ssdaftarKeluhanDialihkanKeUnitLain(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanDialihkanKeUnitLain(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_dialihkan
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
id_unit_lama
|
|
||||||
nama_unit_lama
|
|
||||||
id_unit_baru
|
|
||||||
nama_unit_baru
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
ssdaftarKeluhanBerdasarkanMedia: gql`
|
|
||||||
query ssdaftarKeluhanBerdasarkanMedia(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$idUlp: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarKeluhanBerdasarkanMedia(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
idUlp: $idUlp
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
waktu_media
|
|
||||||
keterangan_media
|
|
||||||
nama_ulp
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
keluhanBerdasarkanMedia: gql`
|
keluhanBerdasarkanMedia: gql`
|
||||||
query daftarKeluhanBerdasarkanMedia(
|
query daftarKeluhanBerdasarkanMedia(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -2718,52 +2375,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarGangguanSelesaiTanpaIdPelanggan: gql`
|
|
||||||
query ssdaftarGangguanSelesaiTanpaIdPelanggan(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$posko: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarGangguanSelesaiTanpaIdPelanggan(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
posko: $posko
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_posko
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
responseTime: gql`
|
responseTime: gql`
|
||||||
query daftarGangguanResponseTime(
|
query daftarGangguanResponseTime(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -2804,60 +2415,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarGangguanResponseTime: gql`
|
|
||||||
query ssdaftarGangguanResponseTime(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$posko: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$minDurasiResponseTime: Int!
|
|
||||||
$maxDurasiResponseTime: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarGangguanResponseTime(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
minDurasiResponseTime: $minDurasiResponseTime
|
|
||||||
maxDurasiResponseTime: $maxDurasiResponseTime
|
|
||||||
posko: $posko
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
is_marking
|
|
||||||
referensi_marking
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_posko
|
|
||||||
penyebab
|
|
||||||
tindakan
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
recoveryTime: gql`
|
recoveryTime: gql`
|
||||||
query daftarGangguanRecoveryTime(
|
query daftarGangguanRecoveryTime(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -2895,58 +2452,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarGangguanRecoveryTime: gql`
|
|
||||||
query ssdaftarGangguanRecoveryTime(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$posko: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$minDurasiRecoveryTime: Int!
|
|
||||||
$maxDurasiRecoveryTime: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarGangguanRecoveryTime(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
minDurasiRecoveryTime: $minDurasiRecoveryTime
|
|
||||||
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
|
|
||||||
posko: $posko
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
is_marking
|
|
||||||
referensi_marking
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_posko
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
melaporLebihDariSatuKaliDetail: gql`
|
melaporLebihDariSatuKaliDetail: gql`
|
||||||
query detailGangguanLaporLebihDariSatuKali($noLaporan: String!) {
|
query detailGangguanLaporLebihDariSatuKali($noLaporan: String!) {
|
||||||
detailGangguanLaporLebihDariSatuKali(noLaporan: $noLaporan) {
|
detailGangguanLaporLebihDariSatuKali(noLaporan: $noLaporan) {
|
||||||
@ -2996,103 +2501,6 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarGangguanMelaporLebihDariSatuKali: gql`
|
|
||||||
query ssdaftarGangguanMelaporLebihDariSatuKali(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$posko: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$minJmlLapor: Int!
|
|
||||||
$maxJmlLapor: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarGangguanMelaporLebihDariSatuKali(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
minJmlLapor: $minJmlLapor
|
|
||||||
maxJmlLapor: $maxJmlLapor
|
|
||||||
posko: $posko
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_lapor
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
jumlah_lapor
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_posko
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
ssdaftarGangguanDiselesaikanMobileAPKT: gql`
|
|
||||||
query ssdaftarGangguanDiselesaikanMobileAPKT(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$posko: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarGangguanDiselesaikanMobileAPKT(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
posko: $posko
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
|
||||||
media
|
|
||||||
nama_posko
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
diselesaikanMobileAPKT: gql`
|
diselesaikanMobileAPKT: gql`
|
||||||
query daftarGangguanDiselesaikanMobileAPKT(
|
query daftarGangguanDiselesaikanMobileAPKT(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
@ -3125,103 +2533,40 @@ export const queries = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
ssdaftarGangguanDialihkanKePoskoLain: gql`
|
dataDialihkanKePoskoLain: gql`
|
||||||
query ssdaftarGangguanDialihkanKePoskoLain(
|
query DaftarGangguan(
|
||||||
$dateFrom: Date!
|
$dateFrom: Date!
|
||||||
$dateTo: Date!
|
$dateTo: Date!
|
||||||
$posko: Int!
|
$posko: Int
|
||||||
$idUid: Int!
|
$idUid: Int
|
||||||
$idUp3: Int!
|
$idUp3: Int
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
) {
|
||||||
ssdaftarGangguanDialihkanKePoskoLain(
|
daftarGangguanDialihkanKePoskoLain(
|
||||||
dateFrom: $dateFrom
|
dateFrom: $dateFrom
|
||||||
dateTo: $dateTo
|
dateTo: $dateTo
|
||||||
posko: $posko
|
posko: $posko
|
||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
) {
|
||||||
totalCount
|
alamat_pelapor
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
pembuat_laporan
|
pembuat_laporan
|
||||||
|
durasi_recovery_time
|
||||||
|
durasi_response_time
|
||||||
waktu_lapor
|
waktu_lapor
|
||||||
waktu_dialihkan
|
waktu_dialihkan
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
waktu_recovery
|
||||||
durasi_response_time
|
waktu_response
|
||||||
durasi_recovery_time
|
|
||||||
id_posko_lama
|
|
||||||
nama_posko_lama
|
|
||||||
id_posko_baru
|
|
||||||
nama_posko_baru
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
idpel_nometer
|
||||||
nama_pelapor
|
|
||||||
alamat_pelapor
|
|
||||||
no_telp_pelapor
|
|
||||||
keterangan_pelapor
|
keterangan_pelapor
|
||||||
media
|
media
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
ssdaftarGangguanBerdasarkanMedia: gql`
|
|
||||||
query ssdaftarGangguanBerdasarkanMedia(
|
|
||||||
$dateFrom: Date!
|
|
||||||
$dateTo: Date!
|
|
||||||
$posko: Int!
|
|
||||||
$idUid: Int!
|
|
||||||
$idUp3: Int!
|
|
||||||
$media: String!
|
|
||||||
$skip: Int
|
|
||||||
$take: Int
|
|
||||||
$requireTotalCount: Boolean
|
|
||||||
$sort: [SortInput]
|
|
||||||
$filter: [FilterInput]
|
|
||||||
) {
|
|
||||||
ssdaftarGangguanBerdasarkanMedia(
|
|
||||||
dateFrom: $dateFrom
|
|
||||||
dateTo: $dateTo
|
|
||||||
posko: $posko
|
|
||||||
idUid: $idUid
|
|
||||||
idUp3: $idUp3
|
|
||||||
media: $media
|
|
||||||
skip: $skip
|
|
||||||
take: $take
|
|
||||||
requireTotalCount: $requireTotalCount
|
|
||||||
sort: $sort
|
|
||||||
filter: $filter
|
|
||||||
) {
|
|
||||||
totalCount
|
|
||||||
data {
|
|
||||||
no_laporan
|
|
||||||
waktu_lapor
|
|
||||||
pembuat_laporan
|
|
||||||
waktu_response
|
|
||||||
waktu_recovery
|
|
||||||
durasi_response_time
|
|
||||||
durasi_recovery_time
|
|
||||||
status_akhir
|
|
||||||
idpel_nometer
|
|
||||||
nama_pelapor
|
nama_pelapor
|
||||||
alamat_pelapor
|
no_laporan
|
||||||
no_telp_pelapor
|
no_telp_pelapor
|
||||||
keterangan_media
|
nama_posko_lama
|
||||||
media
|
nama_posko_baru
|
||||||
waktu_media
|
status_akhir
|
||||||
keterangan_media
|
waktu_recovery
|
||||||
nama_posko
|
waktu_response
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user