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

fix: add margin bottom to all table

Browse Source
This commit is contained in:
kur0nek-o
2024-02-29 10:43:15 +07:00
parent c842088e63
commit cd1ca307d0
73 changed files with 9991 additions and 4764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -2,5 +2,5 @@ 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'
VITE_APP_GRAPHQL_ENDPOINT=http://192.168.5.213:32169/graphql VITE_APP_GRAPHQL_ENDPOINT=http://192.168.191.163:32169/graphql
VITE_APP_REST_ENDPOINT=http://192.168.5.213:32180 VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180

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

@ -1373,6 +1373,14 @@ body {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.box-border { .box-border {
box-sizing: border-box; box-sizing: border-box;
} }

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

@ -1,112 +1,255 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => filters = value" /> <Type4 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
Laporan Pengaduan Total </div>
</h1> <DxDataGrid
</div> class="max-h-[calc(100vh-140px)] mb-10"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :data-source="data"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-column-lines="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :show-row-lines="false"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-borders="true"
<DxSelection mode="single" /> :row-alternation-enabled="true"
<DxPaging :enabled="false" /> :hover-state-enabled="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> @selection-changed="onSelectionChanged"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :column-width="100"
v-if="loading" v-model:visible="loading" :enabled="true" /> @exporting="onExporting"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :allow-column-resizing="true"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> column-resizing-mode="widget"
<DxColumnFixing :enabled="true" /> :word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column"> :width="170"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a" data-field=""
css-class="custom-table-column" /> caption="Nama Unit"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b" <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column"> caption="a"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
data-field=""
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="c"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="d"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="e=a+b+c+d"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn
alignment="center"
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="f" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Marking"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" </DxColumn>
css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="g" css-class="custom-table-column">
<DxColumn alignment="center" caption="f" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking" data-field=""
css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Marking"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> />
<DxColumn alignment="center" caption="g" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking" data-field=""
css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Non Marking"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> />
<DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn> </DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="h=f+g" css-class="custom-table-column">
<DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking" data-field=""
css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Marking"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> />
<DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking" data-field=""
css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Non Marking"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> />
<DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn> </DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid> <DxColumn
alignment="center"
caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="i=f/e" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Marking"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn alignment="center" caption="j=g/e" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Marking"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="k=i+j" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Marking"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
<AnomaliTable2 /> <AnomaliTable2 />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -117,48 +260,54 @@ import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql` const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) { query laporanAnomaliPenangananPengaduanGangguanPetugas(
$dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) {
laporanAnomaliPenangananPengaduanGangguanPetugas( laporanAnomaliPenangananPengaduanGangguanPetugas(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -166,61 +315,65 @@ const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
nama_posko nama_posko
persen_penyelesaian_petugas_anomali_cc_123_marking persen_penyelesaian_petugas_anomali_cc_123_marking
persen_penyelesaian_petugas_anomali_cc_123_non_marking persen_penyelesaian_petugas_anomali_cc_123_non_marking
persen_penyelesaian_petugas_anomali_marking persen_penyelesaian_petugas_anomali_marking
persen_penyelesaian_petugas_anomali_non_marking persen_penyelesaian_petugas_anomali_non_marking
persen_penyelesaian_petugas_anomali_pln_mobile_marking persen_penyelesaian_petugas_anomali_pln_mobile_marking
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_penyelesaian_petugas_anomali_cc_123_marking total_penyelesaian_petugas_anomali_cc_123_marking
total_penyelesaian_petugas_anomali_cc_123_non_marking total_penyelesaian_petugas_anomali_cc_123_non_marking
total_penyelesaian_petugas_anomali_marking total_penyelesaian_petugas_anomali_marking
total_penyelesaian_petugas_anomali_non_marking total_penyelesaian_petugas_anomali_non_marking
total_penyelesaian_petugas_anomali_pln_mobile_marking total_penyelesaian_petugas_anomali_pln_mobile_marking
total_penyelesaian_petugas_anomali_pln_mobile_non_marking total_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_petugas total_petugas
} }
} }
` `
const filterData = (params: any) => { const filterData = (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 ')
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : "", : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { posko: posko ? posko.id : '',
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { idUp3: up3 ? up3.id : 0
data.value = [ })
...data.value, onResult((queryResult) => {
{ if (queryResult.data != undefined) {
...item, queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
} data.value = [
] ...data.value,
}) {
} ...item
console.log(queryResult.data) }
console.log(queryResult.loading) ]
console.log(queryResult.networkStatus) })
}) }
onError((error) => { console.log(queryResult.data)
console.log(error) console.log(queryResult.loading)
}) console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
GET_laporanAnomaliPenangananPengaduanGangguanPetugas, GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
{ {
dateFrom: new Date().toISOString().slice(0, 10), dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10), dateTo: new Date().toISOString().slice(0, 10),
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
} }
) )
const filters = ref() const filters = ref()
</script> </script>

185
src/components/Pages/Anomali/Table_62.vue
View File

@ -1,87 +1,144 @@
<template> <template>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
Laporan Pengaduan PLN Mobile </div>
</h1> <DxDataGrid
</div> class="max-h-[calc(100vh-140px)] mb-10"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :data-source="data"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-column-lines="true"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-row-lines="false"
<DxSelection mode="single" /> :show-borders="true"
<DxPaging :enabled="false" /> :row-alternation-enabled="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :hover-state-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @selection-changed="onSelectionChanged"
v-if="loading" v-model:visible="loading" :enabled="true" /> @exporting="onExporting"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :allow-column-resizing="true"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> column-resizing-mode="widget"
<DxColumnFixing :enabled="true" /> :word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column"> alignment="center"
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a" data-field=""
css-class="custom-table-column" /> caption="Nama Unit"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" />
css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b" <DxColumn
css-class="custom-table-column" /> :width="170"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> data-field=""
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a" data-type="number"
css-class="custom-table-column" /> caption="a"
</DxColumn> css-class="custom-table-column"
/>
</DxDataGrid> </DxColumn>
<DxColumn
alignment="center"
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn
:width="170"
alignment="center"
data-field=""
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn
alignment="center"
caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn
:width="170"
alignment="center"
data-field=""
data-type="number"
caption="c=b/a"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { ref } from 'vue' import { ref } from 'vue'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const loading = ref(true) const loading = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
</script>
</script>

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

@ -1,85 +1,180 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => filters = value" /> <Type4 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
Laporan Pengaduan Total </div>
</h1> <DxDataGrid
</div> class="max-h-[calc(100vh-140px)] mb-10"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :show-column-lines="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-row-lines="false"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :show-borders="true"
:word-wrap-enabled="true"> :row-alternation-enabled="true"
<DxSelection mode="single" /> :hover-state-enabled="true"
<DxPaging :enabled="false" /> @selection-changed="onSelectionChanged"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :column-width="100"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @exporting="onExporting"
v-if="loading" v-model:visible="loading" :enabled="true" /> :allow-column-resizing="true"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> column-resizing-mode="widget"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :word-wrap-enabled="true"
<DxColumnFixing :enabled="true" /> >
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column"> alignment="center"
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a" data-field="nama_posko"
css-class="custom-table-column" /> caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
<DxColumn
:width="170"
alignment="center"
data-field="total_petugas"
caption="a"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn
alignment="center"
caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile"
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali_cc_123"
data-type="number"
caption="c"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali"
data-type="number"
caption="d=b+c"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn
alignment="center"
caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
data-type="number"
caption="Marking"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali" </DxColumn>
css-class="custom-table-column"> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile" <DxColumn
data-type="number" caption="b" css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123" data-type="number"
data-type="number" caption="c" css-class="custom-table-column" /> caption="Marking"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number" <DxColumn
caption="d=b+c" css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
data-type="number"
caption="Non Marking"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali" </DxColumn>
css-class="custom-table-column"> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" :width="150"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number" alignment="center"
caption="Marking" css-class="custom-table-column" /> data-field="total_penyelesaian_petugas_anomali_marking"
<DxColumn :width="150" alignment="center" data-type="number"
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number" caption="Marking"
caption="Non Marking" css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> />
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> :width="150"
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking" data-field="total_penyelesaian_petugas_anomali_non_marking"
data-type="number" caption="Marking" css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" caption="Non Marking"
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number" css-class="custom-table-column"
caption="Non Marking" css-class="custom-table-column" /> />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
data-type="number" caption="Marking" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
data-type="number" caption="Non Marking" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxColumn>
</DxColumn>
</DxDataGrid>
<AnomaliTable4 :filters-detail="filters" /> <AnomaliTable4 :filters-detail="filters" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -91,115 +186,130 @@ import gql from 'graphql-tag'
import { Type4 } from '@/components/Form/FiltersType' import { Type4 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql` const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, query laporanAnomaliPenangananPengaduanGangguanPetugas(
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) { $dateFrom: Date!
$dateTo: Date!
$jenisLaporan: Int
$idUid: Int
$idUp3: Int
$posko: String
) {
laporanAnomaliPenangananPengaduanGangguanPetugas( laporanAnomaliPenangananPengaduanGangguanPetugas(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
jenisLaporan :$jenisLaporan jenisLaporan: $jenisLaporan
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
posko: $posko posko: $posko
) { ) {
nama_posko nama_posko
persen_penyelesaian_petugas_anomali_cc_123_marking persen_penyelesaian_petugas_anomali_cc_123_marking
persen_penyelesaian_petugas_anomali_cc_123_non_marking persen_penyelesaian_petugas_anomali_cc_123_non_marking
persen_penyelesaian_petugas_anomali_marking persen_penyelesaian_petugas_anomali_marking
persen_penyelesaian_petugas_anomali_non_marking persen_penyelesaian_petugas_anomali_non_marking
persen_penyelesaian_petugas_anomali_pln_mobile_marking persen_penyelesaian_petugas_anomali_pln_mobile_marking
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_penyelesaian_petugas_anomali_cc_123_marking total_penyelesaian_petugas_anomali_cc_123_marking
total_penyelesaian_petugas_anomali_cc_123_non_marking total_penyelesaian_petugas_anomali_cc_123_non_marking
total_penyelesaian_petugas_anomali_marking total_penyelesaian_petugas_anomali_marking
total_penyelesaian_petugas_anomali_non_marking total_penyelesaian_petugas_anomali_non_marking
total_penyelesaian_petugas_anomali_pln_mobile_marking total_penyelesaian_petugas_anomali_pln_mobile_marking
total_penyelesaian_petugas_anomali_pln_mobile_non_marking total_penyelesaian_petugas_anomali_pln_mobile_non_marking
total_petugas total_petugas
} }
} }
` `
const filterData = (params: any) => { const filterData = (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 ')
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : "", : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { posko: posko ? posko.id : '',
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { idUp3: up3 ? up3.id : 0
data.value = [ })
...data.value, onResult((queryResult) => {
{ if (queryResult.data != undefined) {
...item, queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking, data.value = [
total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking, ...data.value,
total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking, {
} ...item,
] total_penyelesaian_petugas_anomali_cc_123:
}) item.total_penyelesaian_petugas_anomali_cc_123_marking +
} item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
console.log(queryResult.data) total_penyelesaian_petugas_anomali_pln_mobile:
console.log(queryResult.loading) item.total_penyelesaian_petugas_anomali_pln_mobile_marking +
console.log(queryResult.networkStatus) item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
}) total_penyelesaian_petugas_anomali:
onError((error) => { item.total_penyelesaian_petugas_anomali_marking +
console.log(error) item.total_penyelesaian_petugas_anomali_non_marking
}) }
]
})
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
GET_laporanAnomaliPenangananPengaduanGangguanPetugas, GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
{ {
dateFrom: new Date().toISOString().slice(0, 10), dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10), dateTo: new Date().toISOString().slice(0, 10),
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
} }
) )
const filters = ref() const filters = ref()
</script> </script>

394
src/components/Pages/Anomali/Table_64.vue
View File

@ -1,74 +1,165 @@
<template> <template>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
Laporan Pengaduan PLN Mobile </div>
</h1> <DxDataGrid
</div> class="max-h-[calc(100vh-140px)] mb-10"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :data-source="data"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-column-lines="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :show-row-lines="false"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-borders="true"
<DxSelection mode="single" /> :row-alternation-enabled="true"
<DxPaging :enabled="false" /> :hover-state-enabled="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> @selection-changed="onSelectionChanged"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :column-width="100"
v-if="loading" v-model:visible="loading" :enabled="true" /> @exporting="onExporting"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :allow-column-resizing="true"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> column-resizing-mode="widget"
<DxColumnFixing :enabled="true" /> :word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas" alignment="center"
css-class="custom-table-column" /> data-field="nama_posko"
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column"> caption="Nama Unit"
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a" />
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="170"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" data-field="nama_petugas"
css-class="custom-table-column"> caption="Nama Petugas"
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile" />
data-type="number" caption="b" css-class="custom-table-column" /> <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123" caption="(PLN Mobile, CC123, DLL)"
data-type="number" caption="c" css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> >
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number" :width="150"
caption="d=b+c" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="total_wo"
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> caption="a"
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile" />
data-type="number" caption="e=b/a" css-class="custom-table-column" /> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123" alignment="center"
data-type="number" caption="f=c/a" css-class="custom-table-column" /> caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> >
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali" <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
data-type="number" caption="g=e+f" css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
</DxColumn> alignment="center"
data-field="total_penyelesaian_petugas_anomali_pln_mobile"
</DxDataGrid> data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali_cc_123"
data-type="number"
caption="c"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_penyelesaian_petugas_anomali"
data-type="number"
caption="d=b+c"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn
alignment="center"
caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
data-type="number"
caption="e=b/a"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_penyelesaian_petugas_anomali_cc_123"
data-type="number"
caption="f=c/a"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_penyelesaian_petugas_anomali"
data-type="number"
caption="g=e+f"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps({ defineProps({
filtersDetail: { filtersDetail: {
type: Object as PropType<any>, type: Object as PropType<any>,
required: true required: true
} }
}) })
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -77,110 +168,123 @@ import { Workbook } from 'exceljs'
import { ref, watch, type PropType } from 'vue' import { ref, watch, type PropType } from 'vue'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const filtersDetail = ref({}); // Declare the 'filters' variable const filtersDetail = ref({}) // Declare the 'filters' variable
watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref watch(
() => filtersDetail.value,
(newValue) => {
// Access the 'value' property of the 'filters' ref
filterData(newValue) filterData(newValue)
}, { immediate: true }) },
{ immediate: true }
)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql` const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, query laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) { $dateFrom: Date!
$dateTo: Date!
$jenisLaporan: Int
$idUid: Int
$idUp3: Int
$posko: String
) {
laporanAnomaliDetailPetugasPenangananPengaduanGangguan( laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
jenisLaporan :$jenisLaporan jenisLaporan: $jenisLaporan
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
posko: $posko posko: $posko
) { ) {
nama_petugas nama_petugas
nama_posko nama_posko
persen_penyelesaian_petugas_anomali persen_penyelesaian_petugas_anomali
persen_penyelesaian_petugas_anomali_cc_123 persen_penyelesaian_petugas_anomali_cc_123
persen_penyelesaian_petugas_anomali_pln_mobile persen_penyelesaian_petugas_anomali_pln_mobile
total_penyelesaian_petugas_anomali total_penyelesaian_petugas_anomali
total_penyelesaian_petugas_anomali_cc_123 total_penyelesaian_petugas_anomali_cc_123
total_penyelesaian_petugas_anomali_pln_mobile total_penyelesaian_petugas_anomali_pln_mobile
total_wo total_wo
} }
} }
` `
const filterData = (params: any) => { const filterData = (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 ')
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : "", : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { posko: posko ? posko.id : '',
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { idUp3: up3 ? up3.id : 0
data.value = [ })
...data.value, onResult((queryResult) => {
{ if (queryResult.data != undefined) {
...item, queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
} data.value = [
] ...data.value,
}) {
} ...item
console.log(queryResult.data) }
console.log(queryResult.loading) ]
console.log(queryResult.networkStatus) })
}) }
onError((error) => { console.log(queryResult.data)
console.log(error) console.log(queryResult.loading)
}) console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const { onResult, onError, loading, refetch } = useQuery( const { onResult, onError, loading, refetch } = useQuery(
laporanAnomaliDetailPetugasPenangananPengaduanGangguan, laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
{ {
dateFrom: new Date().toISOString().slice(0, 10), dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10), dateTo: new Date().toISOString().slice(0, 10),
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
} }
) )
</script>
</script>

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

@ -1,82 +1,179 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type4 @update:filters="(value) => filters = value" /> <Type4 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
Laporan Pengaduan Total </div>
</h1> <DxDataGrid
</div> class="max-h-[calc(100vh-140px)] mb-10"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :show-column-lines="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-row-lines="false"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :show-borders="true"
:word-wrap-enabled="true"> :row-alternation-enabled="true"
<DxSelection mode="single" /> :hover-state-enabled="true"
<DxPaging :enabled="false" /> @selection-changed="onSelectionChanged"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :column-width="100"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @exporting="onExporting"
v-if="loading" v-model:visible="loading" :enabled="true" /> :allow-column-resizing="true"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> column-resizing-mode="widget"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :word-wrap-enabled="true"
<DxColumnFixing :enabled="true" /> >
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column"> :width="170"
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a" data-field=""
css-class="custom-table-column" /> caption="Nama Unit"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b" <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Loket" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column"> caption="a"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
</DxColumn> data-field=""
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" data-type="number"
css-class="custom-table-column"> caption="b"
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f" />
css-class="custom-table-column" /> </DxColumn>
</DxColumn> <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g" :width="150"
css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field=""
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g" caption="c"
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="d"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="e=a+b+c+d"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn
alignment="center"
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="f"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="g"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="h=f+g"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> <DxColumn
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e" caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> >
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column"> <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> data-field=""
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j" data-type="number"
css-class="custom-table-column" /> caption="i=f/e"
</DxColumn> css-class="custom-table-column"
</DxColumn> />
</DxColumn>
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="j=g/e"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="k=i+j"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</DxDataGrid> <AnomaliTable6 />
<AnomaliTable6 />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -84,7 +181,16 @@ import Filters from '@/components/Form/Filters.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -94,48 +200,54 @@ import { AnomaliTable6 } from '.'
import { Type4 } from '@/components/Form/FiltersType' import { Type4 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const GET_laporanCheckInCheckOut = gql` const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) { query laporanCheckInCheckOut(
$dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) {
laporanCheckInCheckOut( laporanCheckInCheckOut(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -143,55 +255,56 @@ const GET_laporanCheckInCheckOut = gql`
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
avg_durasi_wo_gangguan_individual avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus avg_durasi_wo_penugasan_khusus
avg_rct_wo_gangguan_individual avg_rct_wo_gangguan_individual
avg_rpt_wo_gangguan_individual avg_rpt_wo_gangguan_individual
jumlah_wo_gangguan_individual jumlah_wo_gangguan_individual
jumlah_wo_penugasan_khusus jumlah_wo_penugasan_khusus
personil_yantek personil_yantek
user_regu user_regu
} }
} }
` `
const filterData = (params: any) => { const filterData = (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 ')
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : "", : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { posko: posko ? posko.id : '',
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { idUp3: up3 ? up3.id : 0
data.value = [ })
...data.value, onResult((queryResult) => {
{ if (queryResult.data != undefined) {
...item, queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
} data.value = [
] ...data.value,
}) {
} ...item
console.log(queryResult.data) }
console.log(queryResult.loading) ]
console.log(queryResult.networkStatus) })
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
} }
) console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,87 +1,143 @@
<template> <template>
<div class="mt-4 lg:mt-6 max-w-7xl"> <div class="mt-4 lg:mt-6 max-w-7xl">
<h1 class="text-xl font-medium md:text-2xl text-dark"> <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
Laporan Pengaduan PLN Mobile </div>
</h1> <DxDataGrid
</div> class="max-h-[calc(100vh-140px)] mb-10"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :show-column-lines="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" :show-row-lines="false"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-borders="true"
<DxSelection mode="single" /> :row-alternation-enabled="true"
<DxPaging :enabled="false" /> :hover-state-enabled="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> @selection-changed="onSelectionChanged"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @exporting="onExporting"
v-if="loading" v-model:visible="loading" :enabled="true" /> :allow-column-resizing="true"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> column-resizing-mode="widget"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :word-wrap-enabled="true"
<DxColumnFixing :enabled="true" /> >
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column"> alignment="center"
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a" data-field=""
css-class="custom-table-column" /> caption="Nama Unit"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali" />
css-class="custom-table-column"> <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b" <DxColumn
css-class="custom-table-column" /> :width="170"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column"> data-field=""
<DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a" data-type="number"
css-class="custom-table-column" /> caption="a"
</DxColumn> css-class="custom-table-column"
/>
</DxDataGrid> </DxColumn>
<DxColumn
alignment="center"
caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn
:width="170"
alignment="center"
data-field=""
data-type="number"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn
alignment="center"
caption="% Pengaduan Yang Diselesaikan Secara Anomali"
css-class="custom-table-column"
>
<DxColumn
:width="170"
alignment="center"
data-field=""
data-type="number"
caption="c=b/a"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver' import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { ref } from 'vue' import { ref } from 'vue'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const loading = ref(false) const loading = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
</script>
</script>

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

@ -1,47 +1,122 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @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 class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :column-width="100"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> @exporting="onExporting"
<DxColumnFixing :enabled="true" /> :allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" <DxColumn
css-class="custom-table-column" /> :width="200"
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek" alignment="center"
css-class="custom-table-column" /> data-field="user_regu"
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number" caption="User Regu"
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number" />
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number" :width="200"
caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" data-field="personil_yantek"
caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" /> caption="Personil Yantek"
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" css-class="custom-table-column"
caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" /> />
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number" <DxColumn
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" /> :width="200"
alignment="center"
</DxDataGrid> data-field="jumlah_wo_gangguan_individual"
</div> data-type="number"
caption="Jumlah WO Gangguan Individual"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_durasi_wo_gangguan_individual"
data-type="number"
caption="Rata-rata Durasi WO Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_rpt_wo_gangguan_individual"
data-type="number"
caption="Rata-rata RPT WO Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_rct_wo_gangguan_individual"
data-type="number"
caption="Rata-rata RCT WO Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="jumlah_wo_penugasan_khusus"
data-type="number"
caption="Jumlah Wo Penugasan Khusus"
css-class="custom-table-column"
/>
<DxColumn
:width="200"
alignment="center"
data-field="avg_durasi_wo_penugasan_khusus"
data-type="number"
caption="Rata-rata Durasi WO Penugasan"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -59,44 +134,50 @@ const dataDetail = ref<any>()
const data = ref<any[]>([]) const data = ref<any[]>([])
const showDetail = ref(false) const showDetail = ref(false)
const showData = () => { const showData = () => {
showDetail.value = true showDetail.value = true
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
dataDetail.value = data dataDetail.value = data
console.log(data) console.log(data)
} }
const GET_laporanCheckInCheckOut = gql` const GET_laporanCheckInCheckOut = gql`
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) { query laporanCheckInCheckOut(
$dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) {
laporanCheckInCheckOut( laporanCheckInCheckOut(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
@ -104,57 +185,57 @@ const GET_laporanCheckInCheckOut = gql`
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
) { ) {
avg_durasi_wo_gangguan_individual avg_durasi_wo_gangguan_individual
avg_durasi_wo_penugasan_khusus avg_durasi_wo_penugasan_khusus
avg_rct_wo_gangguan_individual avg_rct_wo_gangguan_individual
avg_rpt_wo_gangguan_individual avg_rpt_wo_gangguan_individual
jumlah_wo_gangguan_individual jumlah_wo_gangguan_individual
jumlah_wo_penugasan_khusus jumlah_wo_penugasan_khusus
personil_yantek personil_yantek
user_regu user_regu
} }
} }
` `
const filterData = (params: any) => { const filterData = (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 ')
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : "", : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { posko: posko ? posko.id : '',
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => { idUp3: up3 ? up3.id : 0
data.value = [ })
...data.value, onResult((queryResult) => {
{ if (queryResult.data != undefined) {
...item, queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
} data.value = [
] ...data.value,
}) {
} ...item
console.log(queryResult.data) }
console.log(queryResult.loading) ]
console.log(queryResult.networkStatus) })
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(
GET_laporanCheckInCheckOut,
{
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
} }
) console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
}
const { onResult, onError, loading, refetch } = useQuery(GET_laporanCheckInCheckOut, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: '',
idUid: 0,
idUp3: 0
})
const filters = ref() const filters = ref()
</script> </script>

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

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

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

@ -5,7 +5,7 @@
<div id="dataTable"> <div id="dataTable">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:remote-operations="true" :remote-operations="true"
:data-source="data" :data-source="data"
key-expr="no_laporan" key-expr="no_laporan"

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

@ -11,7 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -11,7 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -351,7 +351,6 @@ import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxGroupItem,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -9,7 +9,7 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -46,11 +46,12 @@
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
:width="50" :width="100"
alignment="center" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number" data-type="number"
caption="No" caption="No"
data-field="no"
/> />
<DxColumn <DxColumn
:width="170" :width="170"
@ -90,6 +91,28 @@
{{ data.column.caption }} {{ data.column.caption }}
</p> </p>
</template> </template>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Call PLN 123"
show-in-column="no"
css-class="text-white"
/>
<DxTotalItem
v-for="i in 31"
summary-type="sum"
display-format="{0}"
:column="`tgl${i}`"
css-class="text-white"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white"
/>
</DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -107,7 +130,9 @@ import {
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary,
DxTotalItem
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

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

@ -10,7 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -54,30 +54,56 @@
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="180"
data-field="nama_up3" data-field="nama_up3"
caption="Nama UP3" caption="Nama UP3"
css-class="custom-table-column" css-class="custom-table-column"
/> />
<DxColumn <DxColumn
alignment="center" alignment="center"
:min-width="180"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_posko" data-field="nama_posko"
caption="Nama Posko" caption="Nama Posko"
css-class="custom-table-column" css-class="custom-table-column"
/> />
<DxColumn <DxColumn
:width="100" :width="180"
alignment="center" alignment="center"
data-field="posko_in" data-field="posko_in"
caption="Posko IN" caption="Posko IN"
css-class="custom-table-column" css-class="custom-table-column"
/> />
<DxColumn <DxColumn
:width="100" :width="180"
alignment="center" alignment="center"
data-field="posko_out" data-field="posko_out"
caption="Posko OUT" caption="Posko OUT"
css-class="custom-table-column" css-class="custom-table-column"
/> />
<DxSummary>
<DxGroupItem :show-in-group-footer="true" column="nama_up3" display-format="Total" />
<DxGroupItem
:show-in-group-footer="true"
column="posko_in"
summary-type="sum"
display-format="{0}"
/>
<DxGroupItem
:show-in-group-footer="true"
column="posko_out"
summary-type="sum"
display-format="{0}"
/>
</DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -85,7 +111,7 @@
<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 { onMounted, ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -95,7 +121,9 @@ import {
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary,
DxGroupItem
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

667
src/components/Pages/Gangguan/Table_16.vue
View File

@ -1,171 +1,319 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => { <Type1
filters = value @update:filters="
(value) => {
filters = value
} }
" /> "
</Filters> />
<div id="data"> </Filters>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <div id="data">
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" <DxDataGrid
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" class="max-h-[calc(100vh-140px)] mb-10"
column-resizing-mode="widget" :word-wrap-enabled="true"> :data-source="data"
<DxSelection mode="single" /> :show-column-lines="true"
<DxPaging :enabled="false" /> :show-row-lines="false"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :show-borders="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading" :row-alternation-enabled="true"
v-model:visible="loading" :enabled="true" /> :hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumnFixing :enabled="true" /> :enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2"> <DxColumn
<DxColumn :width="50" alignment="center" :width="50"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a" alignment="center"
css-class="custom-table-column" /> caption="NO"
</DxColumn> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column"> rowspan="4"
<DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" /> colspan="2"
</DxColumn> >
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" :width="50"
css-class="custom-table-column" /> alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="a"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="regu"
caption="b"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="kode_regu"
caption="c"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan"
caption="d=(e+g)"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
caption="e"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
caption="f=(e/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_belum_selesai"
caption="g"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_belum_selesai"
caption="h=(g/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_nonmarking"
caption="i"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_nonmarking"
caption="j=(i/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> data-field="avg_waktu_response_mobile_nonmarking"
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column"> caption="k"
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column"> <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
</DxColumn> data-field="avg_waktu_recovery_mobile_nonmarking"
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> caption="l"
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" />
css-class="custom-table-column" /> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column"> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
</DxColumn> <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
</DxColumn> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_mobile_marking"
caption="m"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_mobile_marking"
caption="n=(m/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Mobile" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column"> <DxColumn
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> :width="150"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" data-field="avg_waktu_response_mobile_marking"
caption="i" css-class="custom-table-column" /> caption="o"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="%" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" </DxColumn>
caption="j=(i/d)*100" css-class="custom-table-column" /> <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
</DxColumn> <DxColumn
</DxColumn> :width="150"
alignment="center"
data-field="avg_waktu_recovery_mobile_marking"
caption="p"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column"> <DxColumn alignment="center" caption="Non Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column"> <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
caption="k" css-class="custom-table-column" /> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" alignment="center"
caption="l" css-class="custom-table-column" /> data-field="total_laporan_nonmobile_nonmarking"
</DxColumn> caption="q"
</DxColumn> css-class="custom-table-column"
</DxColumn> />
</DxColumn>
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column"> <DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column"> <DxColumn
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" alignment="center"
caption="m" css-class="custom-table-column" /> data-field="persen_laporan_nonmobile_nonmarking"
</DxColumn> caption="r=(q/d)*100"
<DxColumn alignment="center" caption="%" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" />
caption="n=(m/d)*100" css-class="custom-table-column" /> </DxColumn>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking"
caption="o" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
caption="p" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Mobile" css-class="custom-table-column">
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking"
caption="q" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
caption="r=(q/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking" caption="s"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking"
caption="u" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking"
caption="w" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
caption="x" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
</div> <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_nonmarking"
caption="s"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_nonmarking"
caption="t"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_laporan_nonmobile_marking"
caption="u"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_laporan_nonmobile_marking"
caption="v=(u/d)*100"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_response_nonmobile_marking"
caption="w"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_waktu_recovery_nonmobile_marking"
caption="x"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -174,7 +322,16 @@ import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -182,120 +339,122 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql` const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
query rekapitulasiGangguanDiselesaikanMobileAPKT query rekapitulasiGangguanDiselesaikanMobileAPKT(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: Int! $posko: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanDiselesaikanMobileAPKT rekapitulasiGangguanDiselesaikanMobileAPKT(
( dateFrom: $dateFrom
dateFrom: $dateFrom dateTo: $dateTo
dateTo: $dateTo posko: $posko
posko: $posko idUid: $idUid
idUid: $idUid idUp3: $idUp3
idUp3: $idUp3
) { ) {
avg_waktu_recovery_mobile_marking avg_waktu_recovery_mobile_marking
avg_waktu_recovery_mobile_nonmarking avg_waktu_recovery_mobile_nonmarking
avg_waktu_recovery_nonmobile_marking avg_waktu_recovery_nonmobile_marking
avg_waktu_recovery_nonmobile_nonmarking avg_waktu_recovery_nonmobile_nonmarking
avg_waktu_response_mobile_marking avg_waktu_response_mobile_marking
avg_waktu_response_mobile_nonmarking avg_waktu_response_mobile_nonmarking
avg_waktu_response_nonmobile_marking avg_waktu_response_nonmobile_marking
avg_waktu_response_nonmobile_nonmarking avg_waktu_response_nonmobile_nonmarking
kode_regu kode_regu
persen_belum_selesai persen_belum_selesai
persen_laporan_mobile_marking persen_laporan_mobile_marking
persen_laporan_mobile_nonmarking persen_laporan_mobile_nonmarking
persen_laporan_nonmobile_marking persen_laporan_nonmobile_marking
persen_laporan_nonmobile_nonmarking persen_laporan_nonmobile_nonmarking
persen_selesai persen_selesai
regu regu
total_belum_selesai total_belum_selesai
total_laporan total_laporan
total_laporan_mobile_marking total_laporan_mobile_marking
total_laporan_mobile_nonmarking total_laporan_mobile_nonmarking
total_laporan_nonmobile_marking total_laporan_nonmobile_marking
total_laporan_nonmobile_nonmarking total_laporan_nonmobile_nonmarking
total_selesai total_selesai
} }
}`; }
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, { `
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), const { onResult, onError, loading, refetch } = useQuery(
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0, posko: 0,
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) }
)
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : 0, : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id :0, dateTo: dateValue[1]
idUp3: up3? up3.id:0, ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
const filters = useFiltersStore() posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
onResult(queryResult => { })
if (queryResult.data != undefined) { const filters = useFiltersStore()
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const filters = ref(); const filters = ref()
</script>
</script>

500
src/components/Pages/Gangguan/Table_17.vue
View File

@ -1,73 +1,198 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => { <Type1
filters = value @update:filters="
(value) => {
filters = value
} }
" /> "
</Filters> />
<div id="data"> </Filters>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <div id="data">
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" <DxDataGrid
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" class="max-h-[calc(100vh-140px)] mb-10"
:allow-column-resizing="true" column-resizing-mode="widget"> :data-source="data"
<DxSelection mode="single" /> :show-column-lines="true"
<DxPaging :enabled="false" /> :show-row-lines="false"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :show-borders="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading" :row-alternation-enabled="true"
v-model:visible="loading" :enabled="true" /> :hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumnFixing :enabled="true" /> :enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn
caption="NO" data-type="number" css-class="custom-table-column" /> :width="50"
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> caption="NO"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" data-type="number"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> caption="Kode Unit"
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :width="150"
css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field=""
</DxColumn> caption="Nama Unit"
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2" data-field=""
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4" />
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> data-type="number"
</DxColumn> caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="Index"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> data-type="number"
caption="Jml"
</DxDataGrid> css-class="custom-table-column"
</div> />
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -75,7 +200,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -85,144 +219,146 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const createDummy = () => { const createDummy = () => {
for (let i = 0; i < 100; i++) { for (let i = 0; i < 100; i++) {
data.value.push({ data.value.push({
id: i, id: i,
nama_unit: '-', nama_unit: '-',
total: 0, total: 0,
selesai: '-', selesai: '-',
in_progress: 0, in_progress: 0,
avg: 0, avg: 0,
max: 0, max: 0,
min: 0, min: 0,
dt_avg: 0, dt_avg: 0,
dt_max: 0, dt_max: 0,
dt_min: 0, dt_min: 0,
dt_more_sla: 0, dt_more_sla: 0,
dt_less_sla: 0, dt_less_sla: 0,
rt_avg: 0, rt_avg: 0,
rt_max: 0, rt_max: 0,
rt_min: 0, rt_min: 0,
rt_more_sla: 0, rt_more_sla: 0,
rt_less_sla: 0, rt_less_sla: 0,
ret_avg: 0, ret_avg: 0,
ret_max: 0, ret_max: 0,
ret_min: 0, ret_min: 0,
ret_more_sla: 0, ret_more_sla: 0,
ret_less_sla: 0, ret_less_sla: 0
}); })
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql` const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
query rekapitulasiGangguanRatingPerPosko query rekapitulasiGangguanRatingPerPosko(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: Int! $posko: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanRatingPerPosko rekapitulasiGangguanRatingPerPosko(
( dateFrom: $dateFrom
dateFrom: $dateFrom dateTo: $dateTo
dateTo: $dateTo posko: $posko
posko: $posko idUid: $idUid
idUid: $idUid idUp3: $idUp3
idUp3: $idUp3
) { ) {
in_process in_process
indeks_rating indeks_rating
jumlah_non_rating jumlah_non_rating
jumlah_rating jumlah_rating
nama_posko nama_posko
persen_in_process persen_in_process
persen_non_rating persen_non_rating
persen_rating persen_rating
persen_selesai persen_selesai
rating_1 rating_1
rating_2 rating_2
rating_3 rating_3
rating_4 rating_4
rating_5 rating_5
regu regu
selesai selesai
total total
} }
}`; }
`
const { onResult, onError, loading, refetch } = useQuery(
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, { GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO,
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), {
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0, posko: 0,
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) }
)
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : 0, : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id :0, dateTo: dateValue[1]
idUp3: up3? up3.id:0, ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult(queryResult => { posko: posko ? posko.id : 0,
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko idUp3: up3 ? up3.id : 0
; })
} onResult((queryResult) => {
console.log(queryResult.data) if (queryResult.data != undefined) {
console.log(queryResult.loading) data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
console.log(queryResult.networkStatus) }
}) console.log(queryResult.data)
onError((error) => { console.log(queryResult.loading)
console.log(error) console.log(queryResult.networkStatus)
}) })
onError((error) => {
console.log(error)
})
} }
const filters = ref(); const filters = ref()
</script>
</script>

391
src/components/Pages/Gangguan/Table_18.vue
View File

@ -1,73 +1,198 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => { <Type1
filters = value @update:filters="
} (value) => {
" /> filters = value
}
"
/>
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading" :hover-state-enabled="true"
v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumnFixing :enabled="true" /> :enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" <DxColumn
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" caption="NO" data-type="number" :width="50"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" /> caption="NO"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" data-field=""
css-class="custom-table-column" /> caption="Kode"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> caption="Nama Regu"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column"> />
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1" alignment="center"
css-class="custom-table-column" /> data-field=""
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4" <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index" data-field=""
css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Jml"
</DxColumn> css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field=""
data-type="number"
caption="Index"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field=""
</DxColumn> data-type="number"
</DxDataGrid> caption="Jml"
</div> css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -77,14 +202,14 @@ import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -93,42 +218,42 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
@ -166,37 +291,39 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
total total
} }
} }
` `
const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, { const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const dateValue = params.periode.split(' s/d ') const { posko, uid, up3 } = params
const { posko, uid, up3 } = params refetch({
refetch({ dateFrom: dateValue[0]
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0, dateTo: dateValue[1]
idUid: uid ? uid.id :0, ? dateValue[1].split('-').reverse().join('-')
idUp3: up3? up3.id:0, : new Date().toISOString().slice(0, 10),
}) posko: posko ? posko.id : 0,
onResult((queryResult) => { idUid: uid ? uid.id : 0,
if (queryResult.data != undefined) { idUp3: up3 ? up3.id : 0
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu })
} onResult((queryResult) => {
console.log(queryResult.data) if (queryResult.data != undefined) {
console.log(queryResult.loading) data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
console.log(queryResult.networkStatus) }
}) console.log(queryResult.data)
onError((error) => { console.log(queryResult.loading)
console.log(error) console.log(queryResult.networkStatus)
}) })
onError((error) => {
console.log(error)
})
} }
const filters = ref() const filters = ref()
</script> </script>

382
src/components/Pages/Gangguan/Table_19.vue
View File

@ -1,55 +1,156 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type18 @update:filters="(value) => { <Type18
filters = value @update:filters="
(value) => {
filters = value
} }
" /> "
</Filters> />
<div id="data"> </Filters>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <div id="data">
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" <DxDataGrid
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" class="max-h-[calc(100vh-140px)] mb-10"
:allow-column-resizing="true" column-resizing-mode="widget"> :data-source="data"
<DxSelection mode="single" /> :show-column-lines="true"
<DxPaging :enabled="false" /> :show-row-lines="false"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :show-borders="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading" :row-alternation-enabled="true"
v-model:visible="loading" :enabled="true" /> :hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumnFixing :enabled="true" /> :enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column"> alignment="center"
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari" data-field="uid"
css-class="custom-table-column" /> caption="Nama Unit"
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret" <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April" :width="100"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei" data-field="januari"
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni" caption="Januari"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus" :width="100"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September" data-field="februari"
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober" caption="Februari"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember" :width="100"
css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="maret"
</DxDataGrid> data-type="number"
</div> caption="Maret"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="april"
data-type="number"
caption="April"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="mei"
data-type="number"
caption="Mei"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juni"
data-type="number"
caption="Juni"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juli"
data-type="number"
caption="Juli"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="agustus"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="september"
data-type="number"
caption="September"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="oktober"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="november"
data-type="number"
caption="November"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="desember"
data-type="number"
caption="Desember"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -58,7 +159,16 @@ import Type18 from '@/components/Form/FiltersType/Type18.vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -66,112 +176,114 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql` const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
query rekapitulasiGangguanKoreksiTransaksiIndividual query rekapitulasiGangguanKoreksiTransaksiIndividual(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$posko: Int! $posko: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiGangguanKoreksiTransaksiIndividual rekapitulasiGangguanKoreksiTransaksiIndividual(
( dateFrom: $dateFrom
dateFrom: $dateFrom dateTo: $dateTo
dateTo: $dateTo posko: $posko
posko: $posko idUid: $idUid
idUid: $idUid idUp3: $idUp3
idUp3: $idUp3
) { ) {
agustus agustus
april april
desember desember
februari februari
januari januari
juli juli
juni juni
maret maret
mei mei
november november
oktober oktober
september september
uid uid
ulp ulp
up3 up3
} }
}`; }
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, { `
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), const { onResult, onError, loading, refetch } = useQuery(
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL,
{
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: 0, posko: 0,
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) }
)
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params
refetch({
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
const dateValue = params.periode.split(' s/d ') onResult((queryResult) => {
const { posko, uid, up3 } = params if (queryResult.data != undefined) {
refetch({ data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
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), console.log(queryResult.data)
posko: posko ? posko.id : 0, console.log(queryResult.loading)
idUid: uid ? uid.id :0, console.log(queryResult.networkStatus)
idUp3: up3? up3.id:0, })
}) onError((error) => {
console.log(error)
onResult(queryResult => { })
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -4,50 +4,172 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible.sync="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible.sync="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumn css-class="custom-table-column" :width="50" alignment="center" :enabled="true"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> :formats="['pdf', 'xlsx', 'document']"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" :allow-export-selected-data="false"
caption="No Laporan" cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor" <DxColumn
caption="Tgl Lapor" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response" :width="50"
caption="Tgl Response" cell-template="data" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="Tgl Recovery" cell-template="data" /> data-type="number"
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" caption="No"
cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn
caption="Durasi Response Time" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time" :width="150"
caption="Durasi Recovery Time" cell-template="data" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" data-field="no_laporan"
cell-template="data" /> caption="No Laporan"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer" cell-template="data"
caption="IDPEL/NO METER" cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" <DxColumn
caption="Nama Pelapor" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" :width="150"
caption="Alamat Pelapor" cell-template="data" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" data-field="waktu_lapor"
caption="No Telp Pelapor" cell-template="data" /> caption="Tgl Lapor"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor" cell-template="data"
caption="Keterangan Pelapor" cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor" <DxColumn
cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" :width="150"
cell-template="data" /> alignment="center"
data-field="waktu_response"
caption="Tgl Response"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
@ -57,7 +179,11 @@
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail"> <DetailDialog
:open="showDetail"
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
@on-close="closeDetail"
>
<div class="w-full p-4 space-y-2 bg-white rounded-xl"> <div class="w-full p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@ -131,7 +257,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1 h-[56px]"
/>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>

330
src/components/Pages/Gangguan/Table_20.vue
View File

@ -1,71 +1,172 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => { <Type1
filters = value @update:filters="
(value) => {
filters = value
} }
" /> "
</Filters> />
<div id="data"> </Filters>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <div id="data">
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" <DxDataGrid
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" class="max-h-[calc(100vh-140px)] mb-10"
:allow-column-resizing="true" column-resizing-mode="widget"> :data-source="data"
<DxSelection mode="single" /> :show-column-lines="true"
<DxPaging :enabled="false" /> :show-row-lines="false"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :show-borders="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" v-if="loading" :row-alternation-enabled="true"
v-model:visible="loading" :enabled="true" /> :hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumnFixing :enabled="true" /> :enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column"> alignment="center"
<DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari" data-field="uid"
css-class="custom-table-column" /> caption="Nama Unit"
<DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret" <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April" :width="100"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei" data-field="januari"
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni" caption="Januari"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus" :width="100"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September" data-field="februari"
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober" caption="Februari"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember" :width="100"
css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="maret"
</DxDataGrid> data-type="number"
</div> caption="Maret"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="april"
data-type="number"
caption="April"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="mei"
data-type="number"
caption="Mei"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juni"
data-type="number"
caption="Juni"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="juli"
data-type="number"
caption="Juli"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="agustus"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="september"
data-type="number"
caption="September"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="oktober"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="november"
data-type="number"
caption="November"
css-class="custom-table-column"
/>
<DxColumn
:width="100"
alignment="center"
data-field="desember"
data-type="number"
caption="Desember"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</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 { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -74,42 +175,42 @@ import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs' import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag' import gql from 'graphql-tag'
const position = { of: '#data' }; const position = { of: '#data' }
const showIndicator = ref(true); const showIndicator = ref(true)
const shading = ref(true); const shading = ref(true)
const showPane = ref(true); const showPane = ref(true)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
@ -147,34 +248,37 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, { const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
posko: posko ? posko.id : 0, : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id :0, dateTo: dateValue[1]
idUp3: up3? up3.id:0, ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { posko: posko ? posko.id : 0,
if (queryResult.data != undefined) { idUid: uid ? uid.id : 0,
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM idUp3: up3 ? up3.id : 0
} })
console.log(queryResult.data) onResult((queryResult) => {
console.log(queryResult.loading) if (queryResult.data != undefined) {
console.log(queryResult.networkStatus) data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
}) }
onError((error) => { console.log(queryResult.data)
console.log(error) console.log(queryResult.loading)
}) console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const filters = ref(); const filters = ref()
</script> </script>

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

@ -4,50 +4,167 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting=""
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
<DxColumn css-class="custom-table-column" :width="50" alignment="center" :enabled="true"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" :formats="['pdf', 'xlsx', 'document']"
cell-template="data" /> :allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="data"
/>
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" <DxColumn
caption="No Laporan" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor" :width="150"
caption="Tgl Lapor" cell-template="data" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response" data-field="no_laporan"
caption="Tgl Response" cell-template="data" /> caption="No Laporan"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery" cell-template="data"
caption="Tgl Recovery" cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time" <DxColumn
caption="Durasi Response Time" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time" :width="150"
caption="Durasi Recovery Time" cell-template="data" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" data-field="waktu_lapor"
cell-template="data" /> caption="Tgl Lapor"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking" cell-template="data"
caption="Referensi Marking" cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer" <DxColumn
caption="IDPEL/NO METER" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" :width="150"
caption="Nama Pelapor" cell-template="data" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor" data-field="waktu_response"
caption="Alamat Pelapor" cell-template="data" /> caption="Tgl Response"
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor" cell-template="data"
caption="No Telp Pelapor" cell-template="data" /> />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor" <DxColumn
caption="Keterangan Pelapor" cell-template="data" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" :width="150"
cell-template="data" /> alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
@ -126,17 +243,32 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.nama_posko"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.penyebab"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.tindakan"
class-name="flex-1 h-[56px]"
/>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -10,7 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -11,7 +11,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="dataReal" :data-source="dataReal"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
@ -61,13 +61,12 @@
css-class="custom-table-column" css-class="custom-table-column"
/> />
<DxColumn <DxColumn
:width="150" :width="120"
alignment="center" alignment="center"
name="jenisGangguanGroup" data-field="kode"
data-field="jenisGangguan" caption="Kode"
caption="Jenis Gangguan"
css-class="custom-table-column" css-class="custom-table-column"
:group-index="0" group-index="0"
/> />
<DxColumn <DxColumn
:width="150" :width="150"
@ -398,6 +397,7 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
persen_selesai persen_selesai
tipe_permasalahan tipe_permasalahan
total total
kode
total_diatas_sla_recovery total_diatas_sla_recovery
total_diatas_sla_response total_diatas_sla_response
total_dibawah_sla_recovery total_dibawah_sla_recovery
@ -473,7 +473,7 @@ const filterData = (params: any) => {
...dataReal.value, ...dataReal.value,
{ {
no: ++no, no: ++no,
kode: item.tipe_permasalahan, kode: item.kode,
jenisGangguan: item.tipe_permasalahan, jenisGangguan: item.tipe_permasalahan,
laporan: { laporan: {
total: item.total, total: item.total,

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -4,52 +4,176 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" :width="50"
css-class="custom-table-column" cell-template="data" /> alignment="center"
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
css-class="custom-table-column" cell-template="data" /> data-type="number"
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" caption="No"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="no_laporan"
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" caption="No Laporan"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" <DxColumn
cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_lapor"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_response"
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column" caption="Tgl Response"
cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column" cell-template="data"
cell-template="data" /> />
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="jumlah_lapor"
caption="Jml Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
@ -113,7 +237,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -123,8 +252,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" <InputText
class-name="flex-1 h-[56px]" /> :readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">

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

@ -4,49 +4,161 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" :width="50"
css-class="custom-table-column" cell-template="data" /> alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_lapor"
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" alignment="center"
cell-template="data" /> data-field="waktu_response"
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_recovery"
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column" cell-template="data"
cell-template="data" /> />
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -103,7 +215,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -113,8 +230,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" <InputText
class-name="flex-1 h-[56px]" /> :readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">

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

@ -4,49 +4,161 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" :width="50"
css-class="custom-table-column" cell-template="data" /> alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_lapor"
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" alignment="center"
cell-template="data" /> data-field="waktu_response"
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_recovery"
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column" cell-template="data"
cell-template="data" /> />
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -104,7 +216,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -114,8 +231,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" <InputText
class-name="flex-1 h-[56px]" /> :readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">

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

@ -4,50 +4,168 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" :width="50"
css-class="custom-table-column" cell-template="data" /> alignment="center"
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
css-class="custom-table-column" cell-template="data" /> data-type="number"
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" caption="No"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="no_laporan"
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time" caption="No Laporan"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" cell-template="data"
cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_lapor"
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column" alignment="center"
cell-template="data" /> data-field="waktu_response"
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column" caption="Tgl Response"
cell-template="data" /> css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Nama ULP"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -105,7 +223,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -115,8 +238,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" <InputText
class-name="flex-1 h-[56px]" /> :readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">

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

@ -4,52 +4,170 @@
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" <DxPager
:show-info="true" :show-navigation-buttons="true" /> :visible="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :allowed-page-sizes="[5, 10, 20]"
v-if="loading" v-model:visible="loading" :enabled="true" /> display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" :width="50"
css-class="custom-table-column" cell-template="data" /> alignment="center"
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
css-class="custom-table-column" cell-template="data" /> data-type="number"
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" caption="No"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="no_laporan"
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" caption="No Laporan"
cell-template="data" /> css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="120"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_response"
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time" caption="Tgl Response"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time" cell-template="data"
css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column" <DxColumn
cell-template="data" /> :width="170"
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="waktu_recovery"
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" caption="Tgl Recovery"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Response Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Recovery Time"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_media"
caption="Tgl Media"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="170"
alignment="center"
data-field="keterangan_media"
caption="Keterangan Media"
css-class="custom-table-column"
cell-template="data"
/>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showData()"> <p class="cursor-pointer" @click="showData()">
{{ data.text }} {{ data.text }}
@ -77,13 +195,22 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" <InputText
class-name="flex-1 h-[56px]" /> :readonly="true"
type="textarea"
:value="dataDetail?.keterangan_pelapor"
class-name="flex-1 h-[56px]"
/>
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
@ -128,7 +255,12 @@
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" /> <InputText
:readonly="true"
type="textarea"
:value="dataDetail?.keterangan_media"
class-name="flex-1 h-[56px]"
/>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>

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

@ -5,7 +5,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -1,56 +1,189 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type3 @update:filters="(value) => filters = value" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onDataSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" <DxColumn
cell-template="data" header-cell-template="title-header" /> :width="170"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="data"
header-cell-template="title-header"
/>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="total"
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" data-type="number"
css-class="custom-table-column" cell-template="data" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress" css-class="custom-table-column"
css-class="custom-table-column" cell-template="data" /> cell-template="data"
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" />
css-class="custom-table-column" cell-template="data" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata" :width="150"
css-class="custom-table-column" cell-template="data" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max" data-field="total_selesai"
css-class="custom-table-column" cell-template="data" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min" caption="Selesai"
css-class="custom-table-column" cell-template="data" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" cell-template="data"
caption="> SLA" css-class="custom-table-column" cell-template="data" /> />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" <DxColumn
caption="≤ SLA" css-class="custom-table-column" cell-template="data" /> :width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="InProgress"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="data"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata" <DxColumn
css-class="custom-table-column" cell-template="data" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max" alignment="center"
css-class="custom-table-column" cell-template="data" /> data-field="avg_durasi_recovery"
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min" data-type="number"
css-class="custom-table-column" cell-template="data" /> caption="Rata-Rata"
<DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA" css-class="custom-table-column"
css-class="custom-table-column" cell-template="data" /> cell-template="data"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA" />
css-class="custom-table-column" cell-template="data" /> <DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_recovery"
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="data"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_recovery"
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="data"
/>
</DxColumn> </DxColumn>
<template #data="{ data }"> <template #data="{ data }">
<p class="cursor-pointer" @click="showDialog()"> <p class="cursor-pointer" @click="showDialog()">
@ -66,8 +199,12 @@
</DxDataGrid> </DxDataGrid>
</div> </div>
<DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All" <DetailDialog
@on-close="closeDetailDialog"> :open="showDialogDetail"
:full-width="true"
title="Detail Rekapitulasi Keluhan All"
@on-close="closeDetailDialog"
>
<div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between"> <div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
<div class="flex flex-1 p-4 bg-white rounded-xl"> <div class="flex flex-1 p-4 bg-white rounded-xl">
<div class="w-full"> <div class="w-full">
@ -111,107 +248,77 @@
css-class="custom-table-column" /> css-class="custom-table-column" />
</DxDataGrid> --> </DxDataGrid> -->
</div> </div>
</div> </div>
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl"> <div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
No Laporan:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
Tgl Lapor:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Dalam Proses Bidang:</h3>
Dalam Proses Bidang:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Selesai Bidang Unit:</h3>
Selesai Bidang Unit:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
Durasi Response Time:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
Status:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER::</h3>
IDPEL/NO METER::
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
Nama Pelapor:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
Alamat Pelapor:
</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" /> <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
No Telp Pelapor:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
Keterangan Pelapor:
</h3>
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" /> <InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Rayon:</h3>
Rayon:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1" /> <InputText :readonly="true" value="-" class-name="flex-1" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Uraian:</h3>
Uraian:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" /> <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div> </div>
<div class="flex flex-row justify-between w-full"> <div class="flex flex-row justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800"> <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Pelanggan:</h3>
Response Pelanggan:
</h3>
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" /> <InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
</div> </div>
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
@ -300,41 +407,40 @@ const onExporting = (e: any) => {
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiKeluhanAll query rekapitulasiKeluhanAll(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiKeluhanAll rekapitulasiKeluhanAll(
( dateFrom: $dateFrom
dateFrom: $dateFrom dateTo: $dateTo
dateTo: $dateTo idUlp: $idUlp
idUlp: $idUlp idUid: $idUid
idUid: $idUid idUp3: $idUp3
idUp3: $idUp3
) { ) {
id_ulp id_ulp
nama_ulp nama_ulp
total total
total_selesai total_selesai
persen_selesai persen_selesai
total_inproses total_inproses
persen_inproses persen_inproses
avg_durasi_response avg_durasi_response
min_durasi_response min_durasi_response
max_durasi_response max_durasi_response
total_dibawah_sla_response total_dibawah_sla_response
total_diatas_sla_response total_diatas_sla_response
avg_durasi_recovery avg_durasi_recovery
min_durasi_recovery min_durasi_recovery
max_durasi_recovery max_durasi_recovery
total_dibawah_sla_recovery total_dibawah_sla_recovery
total_diatas_sla_recovery total_diatas_sla_recovery
} }
}` }
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, { const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
@ -343,14 +449,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref(); const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { idUlp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0

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

@ -1,79 +1,214 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" /> <Type13 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :column-width="100"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> @exporting="onExporting"
<DxColumnFixing :enabled="true" /> :allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang" :width="50"
css-class="custom-table-column" /> alignment="center"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" data-type="number"
css-class="custom-table-column" /> caption="No"
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> />
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="fungsi_bidang"
</DxColumn> caption="Fungsi Bidang"
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml" />
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" <DxColumn
css-class="custom-table-column" /> :width="150"
</DxColumn> alignment="center"
</DxColumn> data-field="total"
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> data-type="number"
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> caption="Total"
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
caption="Rata-Rata" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" :width="150"
caption="Max" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" data-field="total_selesai"
caption="Min" css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Jml"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" />
caption=">SLA" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" :width="150"
caption="≤SLA" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="persen_selesai"
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> caption="%"
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" />
css-class="custom-table-column" /> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
caption="Rata-Rata" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" :width="150"
caption="Max" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" data-field="total_inproses"
caption="Min" css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Jml"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" />
caption=">SLA" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" :width="150"
caption="≤SLA" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="persen_inproses"
</DxColumn> data-type="number"
</DxDataGrid> caption="%"
</div> css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -83,14 +218,14 @@ import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -106,37 +241,37 @@ const showPane = ref(true)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
@ -175,38 +310,39 @@ const GET_DATA = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, { const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date('2023-10-01').toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0, idUlp: 0,
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref(); const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { idUlp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
idUlp: idUlp ? idUlp.id : 0, : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
onResult((queryResult) => { idUp3: up3 ? up3.id : 0
if (queryResult.data != undefined) { })
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
</script> </script>

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

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

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

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

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

@ -1,75 +1,209 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type13 @update:filters="(value) => filters = value" /> <Type13 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:data-source="data" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :show-column-lines="true"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-row-lines="false"
:show-borders="true"
:data-source="data"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn
caption="NO" css-class="custom-table-column" /> :width="50"
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor" alignment="center"
css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal_lapor"
caption="Tanggal Lapor"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" alignment="center"
caption="Rata-Rata" css-class="custom-table-column" /> data-field="total_inproses"
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" <DxColumn
caption=">SLA" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" alignment="center"
caption="≤SLA" css-class="custom-table-column" /> data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" alignment="center"
caption="Rata-Rata" css-class="custom-table-column" /> data-field="total_selesai"
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" <DxColumn
caption=">SLA" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" alignment="center"
caption="≤SLA" css-class="custom-table-column" /> data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -179,24 +313,26 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref(); const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { idUlp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerTanggal data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)

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

@ -1,74 +1,209 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" /> <Type8 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn
caption="NO" css-class="custom-table-column" /> :width="50"
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" /> alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="nama_ulp"
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" alignment="center"
caption="Rata-Rata" css-class="custom-table-column" /> data-field="total"
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" <DxColumn
caption=">SLA" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" alignment="center"
caption="≤SLA" css-class="custom-table-column" /> data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" alignment="center"
caption="Rata-Rata" css-class="custom-table-column" /> data-field="total"
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max" data-type="number"
css-class="custom-table-column" /> caption="Total"
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" <DxColumn
caption=">SLA" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" alignment="center"
caption="≤SLA" css-class="custom-table-column" /> data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
@ -179,14 +314,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref(); const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { idUlp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
@ -195,7 +334,6 @@ const filterData = (params: any) => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanPerUnit data.value = queryResult.data.rekapitulasiKeluhanPerUnit
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
@ -204,6 +342,5 @@ const filterData = (params: any) => {
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
</script> </script>

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

@ -1,27 +1,67 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type3 @update:filters="(value) => filters = value" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" <DxColumn
caption="NO" css-class="custom-table-column" /> :width="50"
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" /> alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Nama Media"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i" <DxColumn
css-class="custom-table-column" /> v-for="i in 31"
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -146,14 +186,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filters = ref(); const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { idUlp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0, idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
@ -162,7 +206,6 @@ const filterData = (params: any) => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)

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

@ -1,72 +1,199 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type8 @update:filters="(value) => filters = value" /> <Type8 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :column-width="100"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> @exporting="onExporting"
<DxColumnFixing :enabled="true" /> :allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" :width="50"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
css-class="custom-table-column" /> data-type="number"
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> caption="No"
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" />
css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> :width="150"
<DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml" alignment="center"
css-class="custom-table-column" /> data-field="regu"
<DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%" caption="Kode Unit"
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml" :width="170"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" data-field="nama_idUlp"
css-class="custom-table-column" /> caption="Nama Unit"
</DxColumn> css-class="custom-table-column"
</DxColumn> />
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column"> <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml" :width="150"
css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%" data-field="total"
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1" caption="Total"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2" />
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4" alignment="center"
css-class="custom-table-column" /> data-field="in_process"
<DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5" data-type="number"
css-class="custom-table-column" /> caption="Jml"
<DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml" data-field="persen_in_process"
css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%" caption="%"
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> />
</DxColumn>
</DxDataGrid> <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
</div> <DxColumn
:width="150"
alignment="center"
data-field="selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_rating"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_1"
data-type="number"
caption="1"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_2"
data-type="number"
caption="2"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_3"
data-type="number"
caption="3"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_4"
data-type="number"
caption="4"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rating_5"
data-type="number"
caption="5"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="indeks_rating"
data-type="number"
caption="Indeks"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_non_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_non_rating"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -75,7 +202,16 @@ import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters' import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -88,111 +224,109 @@ const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const data = ref<any[]>([]) const data = ref<any[]>([])
const GET_DATA = gql` const GET_DATA = gql`
query rekapitulasiKeluhanRatingPerUnit query rekapitulasiKeluhanRatingPerUnit(
(
$dateFrom: Date! $dateFrom: Date!
$dateTo: Date! $dateTo: Date!
$idUlp: Int! $idUlp: Int!
$idUid: Int! $idUid: Int!
$idUp3: Int! $idUp3: Int!
) { ) {
rekapitulasiKeluhanRatingPerUnit rekapitulasiKeluhanRatingPerUnit(
( dateFrom: $dateFrom
dateFrom: $dateFrom dateTo: $dateTo
dateTo: $dateTo idUlp: $idUlp
idUlp: $idUlp idUid: $idUid
idUid: $idUid idUp3: $idUp3
idUp3: $idUp3
) { ) {
in_process in_process
indeks_rating indeks_rating
jumlah_non_rating jumlah_non_rating
jumlah_rating jumlah_rating
nama_idUlp nama_idUlp
persen_in_process persen_in_process
persen_non_rating persen_non_rating
persen_rating persen_rating
persen_selesai persen_selesai
rating_1 rating_1
rating_2 rating_2
rating_3 rating_3
rating_4 rating_4
rating_5 rating_5
regu regu
selesai selesai
total total
} }
}`; }
`
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, { const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUlp: 0, idUlp: 0,
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0
}) })
const filters = ref(); const filters = ref()
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { idUlp, uid, up3 } = params const { idUlp, uid, up3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
idUlp: idUlp ? idUlp.id : 0, : new Date().toISOString().slice(0, 10),
idUid: uid ? uid.id : 0, dateTo: dateValue[1]
idUp3: up3 ? up3.id : 0 ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
idUlp: idUlp ? idUlp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
onResult(queryResult => { })
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
</script> </script>

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

@ -1,57 +1,154 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => filters = value" /> <Type14 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100" class="max-h-[calc(100vh-140px)] mb-10"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :page-size="5" :enabled="true" /> :show-borders="true"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" :row-alternation-enabled="true"
:show-info="true" :show-navigation-buttons="true" /> :hover-state-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @selection-changed=""
v-if="loading" v-model:visible="loading" :enabled="true" /> :column-width="100"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting=""
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumn css-class="custom-table-column" :width="50" alignment="center" column-resizing-mode="widget"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> >
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan" <DxColumn
caption="Nomor Gangguan" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan" :width="170"
caption="Nama Pelanggan" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan" data-field="nomo_gangguan"
caption="Isi Laporan" /> caption="Nomor Gangguan"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan" />
caption="Penyebab Gangguan" /> <DxColumn
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam" css-class="custom-table-column"
caption="Tgl Padam" /> :width="170"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" /> data-field="nama_pelanggan"
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai"> caption="Nama Pelanggan"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber" />
caption="Sumber" /> <DxColumn
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan" :width="170"
caption="Satuan" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume" data-field="isi_laporan"
caption="Vol" /> caption="Isi Laporan"
</DxColumn> />
<DxColumn
</DxDataGrid> css-class="custom-table-column"
</div> :width="170"
alignment="center"
data-field="penyebab_gangguan"
caption="Penyebab Gangguan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="waktu_padam"
caption="Tgl Padam"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Tgl Nyala"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="regu"
caption="Regu"
/>
<DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="sumber"
caption="Sumber"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Nama"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="satuan"
caption="Satuan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="volume"
caption="Vol"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
import Filters from '@/components/Form/Filters.vue'; DxColumn,
import { Type14 } from '@/components/Form/FiltersType'; DxExport,
import { useQuery } from '@vue/apollo-composable'; DxLoadPanel,
import gql from 'graphql-tag'; DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import Filters from '@/components/Form/Filters.vue'
import { Type14 } from '@/components/Form/FiltersType'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -60,65 +157,71 @@ const data = ref<any[]>([])
const daftarGangguanDanMaterialDipakai = gql` const daftarGangguanDanMaterialDipakai = gql`
query DaftardaftarGangguanDanMaterialDipakai( query DaftardaftarGangguanDanMaterialDipakai(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int $dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) { ) {
daftarGangguanDanMaterialDipakai( daftarGangguanDanMaterialDipakai(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
distribusi: $idUid distribusi: $idUid
area: $idUp3 area: $idUp3
posko: $posko posko: $posko
) { ) {
isi_laporan isi_laporan
nama_material nama_material
nama_pelanggan nama_pelanggan
nomor_gangguan nomor_gangguan
penyebab_gangguan penyebab_gangguan
regu regu
satuan satuan
sumber sumber
volume volume
waktu_padam waktu_padam
} }
} }
` `
const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, { const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
posko: '' posko: ''
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params const { posko, idUid, idUp3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
idUid: idUid ? idUid.id : 0, : new Date().toISOString().slice(0, 10),
idUp3: idUp3 ? idUp3.id : 0, dateTo: dateValue[1]
posko: posko ? posko.id : 0, ? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
}) idUid: idUid ? idUid.id : 0,
onResult((queryResult) => { idUp3: idUp3 ? idUp3.id : 0,
if (queryResult.data != undefined) { posko: posko ? posko.id : 0
queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => { })
data.value = [ onResult((queryResult) => {
...data.value, if (queryResult.data != undefined) {
{ queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
...item data.value = [
} ...data.value,
] {
}) ...item
} }
console.log(queryResult.data) ]
console.log(queryResult.loading) })
console.log(queryResult.networkStatus) }
}) console.log(queryResult.data)
onError((error) => { console.log(queryResult.loading)
console.log(error) console.log(queryResult.networkStatus)
}) })
onError((error) => {
console.log(error)
})
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,43 +1,110 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type14 @update:filters="(value) => filters = value" /> <Type14 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100" class="max-h-[calc(100vh-140px)] mb-10"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :page-size="5" :enabled="true" /> :show-borders="true"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" :row-alternation-enabled="true"
:show-info="true" :show-navigation-buttons="true" /> :hover-state-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @selection-changed=""
v-if="loading" v-model:visible="loading" :enabled="true" /> :column-width="100"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting=""
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumn css-class="custom-table-column" :width="50" alignment="center" column-resizing-mode="widget"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" /> >
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn
css-class="custom-table-column"
:width="50"
alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material" <DxColumn
caption="Kode Material" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material" :width="170"
caption="Nama Material" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" data-field="kode_material"
caption="Satuan" /> caption="Kode Material"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material" />
caption="Sumber Material" /> <DxColumn
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal"> css-class="custom-table-column"
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :width="170"
:caption="i" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="nama_material"
caption="Nama Material"
</DxDataGrid> />
</div> <DxColumn
css-class="custom-table-column"
:width="120"
alignment="center"
data-field="satuan"
caption="Satuan"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="sumber_material"
caption="Sumber Material"
/>
<DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
<DxColumn
v-for="i in 31"
:width="150"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { Type14 } from '@/components/Form/FiltersType' import { Type14 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import { useQuery } from '@vue/apollo-composable' import { useQuery } from '@vue/apollo-composable'
@ -50,91 +117,98 @@ const data = ref<any[]>([])
const rekapitulasiPemakaianMaterial = gql` const rekapitulasiPemakaianMaterial = gql`
query DaftarrekapitulasiPemakaianMaterial( query DaftarrekapitulasiPemakaianMaterial(
$dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int $dateFrom: Date!
$dateTo: Date!
$posko: String
$idUid: Int
$idUp3: Int
) { ) {
rekapitulasiPemakaianMaterial( rekapitulasiPemakaianMaterial(
dateFrom: $dateFrom dateFrom: $dateFrom
dateTo: $dateTo dateTo: $dateTo
distribusi: $idUid distribusi: $idUid
area: $idUp3 area: $idUp3
posko: $posko posko: $posko
) { ) {
kode_material kode_material
nama_material nama_material
satuan satuan
sumber_material sumber_material
tgl1 tgl1
tgl10 tgl10
tgl11 tgl11
tgl12 tgl12
tgl13 tgl13
tgl14 tgl14
tgl15 tgl15
tgl16 tgl16
tgl17 tgl17
tgl18 tgl18
tgl19 tgl19
tgl2 tgl2
tgl20 tgl20
tgl21 tgl21
tgl22 tgl22
tgl23 tgl23
tgl24 tgl24
tgl25 tgl25
tgl26 tgl26
tgl27 tgl27
tgl28 tgl28
tgl29 tgl29
tgl3 tgl3
tgl30 tgl30
tgl31 tgl31
tgl4 tgl4
tgl5 tgl5
tgl6 tgl6
tgl7 tgl7
tgl8 tgl8
tgl9 tgl9
} }
} }
` `
const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, { const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10), dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
posko: 0 posko: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params const { posko, idUid, idUp3 } = params
refetch({ refetch({
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), dateFrom: dateValue[0]
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), ? dateValue[0].split('-').reverse().join('-')
idUid: idUid ? idUid.id : 0, : new Date().toISOString().slice(0, 10),
idUp3: idUp3 ? idUp3.id : 0, dateTo: dateValue[1]
posko: posko ? posko.id : 0, ? dateValue[1].split('-').reverse().join('-')
}) : new Date().toISOString().slice(0, 10),
onResult((queryResult) => { idUid: idUid ? idUid.id : 0,
if (queryResult.data != undefined) { idUp3: idUp3 ? idUp3.id : 0,
queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => { posko: posko ? posko.id : 0
data.value = [ })
...data.value, onResult((queryResult) => {
{ if (queryResult.data != undefined) {
...item queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
} data.value = [
] ...data.value,
}) {
} ...item
console.log(queryResult.data) }
console.log(queryResult.loading) ]
console.log(queryResult.networkStatus) })
}) }
onError((error) => { console.log(queryResult.data)
console.log(error) console.log(queryResult.loading)
}) console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -10,7 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:remote-operations="true" :remote-operations="true"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
@ -226,7 +226,7 @@ const tahunLalu = ref(tahunSekarang.value - 1)
// const MONALISAJUMLAHKALIGANGGUAN = gql` // const MONALISAJUMLAHKALIGANGGUAN = gql`
// query DaftarMonalisaJumlahKaliGangguan( // query DaftarMonalisaJumlahKaliGangguan(
// $regional: Int // $regional: String
// $idUid: Int // $idUid: Int
// $idUp3: Int // $idUp3: Int
// $idUlp: Int // $idUlp: Int

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

@ -10,7 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -10,7 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -10,7 +10,7 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
class="max-h-[calc(100vh-140px)]" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"

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

@ -1,73 +1,176 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div> <div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column"> alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Jumlah dan Durasi RPT & RCT Gangguan"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number" <DxColumn
data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" /> :width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" data-type="number" <DxColumn
data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" /> :width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rct_gangguan_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column"> <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="a"
data-type="number"
data-field="total_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="b" data-type="number" <DxColumn
data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" /> :width="150"
alignment="center"
caption="b"
data-type="number"
data-field="jumlah_gangguan_rpt_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" <DxColumn
data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" /> :width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field="rpt_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan" <DxColumn
css-class="custom-table-column" /> :width="150"
alignment="center"
caption="d"
data-type="number"
data-field="total_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="e" data-type="number" <DxColumn
data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" /> :width="150"
alignment="center"
caption="e"
data-type="number"
data-field="jumlah_gangguan_rct_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column"> <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" <DxColumn
data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" /> :width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field="rch_gangguan_sampai_bulan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
@ -150,7 +253,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({ refetch({
regional: regional, regional: regional,
@ -163,9 +266,7 @@ const filterData = (params: any) => {
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => { queryResult.data.monalisaJumlahDurasiRptRctGangguan.forEach((item: any) => {
data.value = [ data.value = [...data.value, { ...item }]
...data.value, { ...item }
]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
@ -211,5 +312,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,33 +1,77 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" :width="50"
css-class="custom-table-column" /> alignment="center"
<DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
<DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" caption="NO"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="id_gangguan"
</DxDataGrid> caption="ID Gangguan"
</div> css-class="custom-table-column"
/>
<DxColumn
alignment="center"
data-field="tipe_permasalahan"
caption="Jenis Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="jumlah"
caption="Jumlah"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="persen_gangguan"
caption="%"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -36,14 +80,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -87,75 +131,75 @@ const monalisaGangguanPerJenisGangguan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, { const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => { queryResult.data.monalisaGangguanPerJenisGangguan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filters = ref() const filters = ref()

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

@ -1,42 +1,104 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Nama Unit"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%" <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" data-field="jumlah_bulan"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%" />
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
</DxColumn> alignment="center"
</DxDataGrid> data-field="jumlah_bulan_n_1"
</div> data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_bulan"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun_n_1"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_tahun"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -45,14 +107,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -101,77 +163,77 @@ const monalisaRekapitulasiLaporUlangGangguan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, { const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
bulanSekarang.value = bulan.id; bulanSekarang.value = bulan.id
tahunSekarang.value = tahun.id; tahunSekarang.value = tahun.id
tahunLalu.value = tahun.id - 1; tahunLalu.value = tahun.id - 1
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => { queryResult.data.monalisaRekapitulasiLaporUlangGangguan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filters = ref() const filters = ref()

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

@ -1,42 +1,104 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Nama Unit"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%" <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" data-field="jumlah_bulan"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%" />
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
</DxColumn> alignment="center"
</DxDataGrid> data-field="jumlah_bulan_n_1"
</div> data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_bulan"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun_n_1"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_tahun"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -45,14 +107,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -101,77 +163,77 @@ const monalisaRekapitulasiEnsGangguan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, { const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
bulanSekarang.value = bulan.id; bulanSekarang.value = bulan.id
tahunSekarang.value = tahun.id; tahunSekarang.value = tahun.id
tahunLalu.value = tahun.id - 1; tahunLalu.value = tahun.id - 1
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => { queryResult.data.monalisaRekapitulasiEnsGangguan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filters = ref() const filters = ref()

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

@ -1,32 +1,76 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan" data-field="nama_posko"
css-class="custom-table-column" /> caption="Nama Unit"
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
</DxDataGrid> alignment="center"
</div> data-field="gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -35,14 +79,14 @@ import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxExport,
DxLoadPanel, DxLoadPanel,
DxPaging, DxPaging,
DxScrolling, DxScrolling,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@ -79,86 +123,85 @@ const monalisaGangguanBelumSelesai = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
gangguan gangguan
informasi informasi
nama_posko nama_posko
total total
} }
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, { const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
regional: '',
regional: '', posko: '',
posko: '', idUid: 0,
idUid: 0, idUp3: 0,
idUp3: 0, bulan: 10,
bulan: 10, tahun: 2023
tahun: 2023,
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
bulanSekarang.value = bulan.id; bulanSekarang.value = bulan.id
tahunSekarang.value = tahun.id; tahunSekarang.value = tahun.id
tahunLalu.value = tahun.id - 1; tahunLalu.value = tahun.id - 1
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => { queryResult.data.monalisaGangguanBelumSelesai.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5 indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filters = ref() const filters = ref()

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

@ -1,42 +1,104 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Nama Unit"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%" <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" data-field="jumlah_bulan"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%" />
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
</DxColumn> alignment="center"
</DxDataGrid> data-field="jumlah_bulan_n_1"
</div> data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_bulan"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun_n_1"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_tahun"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -44,7 +106,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -59,35 +130,34 @@ const shading = ref(true)
const showPane = ref(true) const showPane = ref(true)
const data = ref<any[]>([]) const data = ref<any[]>([])
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const tahunSekarang = ref(new Date().getFullYear()) const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth()) const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1) const tahunLalu = ref(tahunSekarang.value - 1)
@ -119,45 +189,45 @@ const MONALISAJUMLAHKALIKELUHAN = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, { const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
bulan: bulanSekarang.value, bulan: bulanSekarang.value,
tahun: tahunSekarang.value tahun: tahunSekarang.value
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
bulanSekarang.value = bulan.id; bulanSekarang.value = bulan.id
tahunSekarang.value = tahun.id; tahunSekarang.value = tahun.id
tahunLalu.value = tahun.id - 1; tahunLalu.value = tahun.id - 1
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : bulanSekarang.value, bulan: bulan ? bulan.id : bulanSekarang.value,
tahun: bulan ? tahun.id : tahunSekarang.value tahun: bulan ? tahun.id : tahunSekarang.value
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.monalisaJumlahKaliKeluhan; data.value = queryResult.data.monalisaJumlahKaliKeluhan
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
onMounted(() => { onMounted(() => {
console.log(bulanSekarang.value) console.log(bulanSekarang.value)
}); })
const filters = ref(); const filters = ref()
</script> </script>

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

@ -1,42 +1,108 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Nama Unit"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> caption="Jumlah RCT Kali Keluhan"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> >
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" :width="150"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%" data-field="jumlah_bulan"
css-class="custom-table-column" /> data-type="number"
</DxColumn> :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
</DxColumn> css-class="custom-table-column"
</DxDataGrid> />
</div> <DxColumn
:width="150"
alignment="center"
data-field="jumlah_bulan_n_1"
data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_bulan"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun_n_1"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_tahun"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -44,7 +110,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -64,32 +139,32 @@ const tahunLalu = ref(tahunSekarang.value - 1)
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const monalisaDispatchingTimeKeluhan = gql` const monalisaDispatchingTimeKeluhan = gql`
query DaftarmonalisaDispatchingTimeKeluhan( query DaftarmonalisaDispatchingTimeKeluhan(
@ -119,49 +194,49 @@ const monalisaDispatchingTimeKeluhan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, { const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
bulan: 10, bulan: 10,
tahun: 2023 tahun: 2023
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
bulanSekarang.value = bulan.id; bulanSekarang.value = bulan.id
tahunSekarang.value = tahun.id; tahunSekarang.value = tahun.id
tahunLalu.value = tahun.id - 1; tahunLalu.value = tahun.id - 1
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => { queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,42 +1,108 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Nama Unit"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%" alignment="center"
css-class="custom-table-column" /> caption="Jumlah RPT Kali Keluhan"
</DxColumn> css-class="custom-table-column"
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> >
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" :width="150"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%" data-field="jumlah_bulan"
css-class="custom-table-column" /> data-type="number"
</DxColumn> :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
</DxColumn> css-class="custom-table-column"
</DxDataGrid> />
</div> <DxColumn
:width="150"
alignment="center"
data-field="jumlah_bulan_n_1"
data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_bulan"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun_n_1"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_tahun"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -44,7 +110,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -64,96 +139,105 @@ const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth()) const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1) const tahunLalu = ref(tahunSekarang.value - 1)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const monalisaRecoveryTimeKeluhan = gql` const monalisaRecoveryTimeKeluhan = gql`
query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: Int, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) { query DaftarmonalisaRecoveryTimeKeluhan(
$regional: regional
$posko: Int
$idUid: Int
$idUp3: Int
$bulan: Int
$tahun: Int
) {
monalisaRecoveryTimeKeluhan( monalisaRecoveryTimeKeluhan(
regional:$regional regional: $regional
posko: $posko posko: $posko
idUid: $idUid idUid: $idUid
idUp3: $idUp3 idUp3: $idUp3
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
jumlah_bulan jumlah_bulan
jumlah_bulan_n_1 jumlah_bulan_n_1
jumlah_tahun jumlah_tahun
jumlah_tahun_n_1 jumlah_tahun_n_1
nama_posko nama_posko
persen_bulan persen_bulan
persen_tahun persen_tahun
} }
} }
`; `
const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, { const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
regional: 0, regional: 0,
posko: 0, posko: 0,
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params
const { regional, posko, idUid, idUp3, bulan, tahun } = params; bulanSekarang.value = bulan.id
bulanSekarang.value = bulan.id; tahunSekarang.value = tahun.id
tahunSekarang.value = tahun.id; tahunLalu.value = tahun.id - 1
tahunLalu.value = tahun.id - 1; refetch({
refetch({ regional: regional,
regional: regional, posko: posko ? posko.id : 0,
posko: posko ? posko.id : 0, idUid: idUid ? idUid.id : 0,
idUid: idUid ? idUid.id : 0, idUp3: idUp3 ? idUp3.id : 0,
idUp3: idUp3 ? idUp3.id : 0, bulan: bulan ? bulan.id : 10,
bulan: bulan ? bulan.id : 10, tahun: bulan ? tahun.id : 2023
tahun: bulan ? tahun.id : 2023 })
}) onResult((queryResult) => {
onResult(queryResult => { if (queryResult.data != undefined) {
if (queryResult.data != undefined) { queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => { data.value = [
data.value = [...data.value, { ...data.value,
...item, {
}]; ...item
}); }
} ]
console.log(queryResult.data) })
console.log(queryResult.loading) }
console.log(queryResult.networkStatus) console.log(queryResult.data)
}) console.log(queryResult.loading)
onError((error) => { console.log(queryResult.networkStatus)
console.log(error) })
}) onError((error) => {
console.log(error)
})
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,79 +1,182 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :column-width="100"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> @exporting="onExporting"
<DxColumnFixing :enabled="true" /> :allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="200"
<DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Keluhan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> caption="Nama Unit"
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="" css-class="custom-table-column"
css-class="custom-table-column" /> />
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field="" caption="Jumlah dan Durasi RPT & RCT Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> >
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="" <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="" caption="a"
css-class="custom-table-column" /> data-type="number"
</DxColumn> data-field=""
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field="" />
css-class="custom-table-column" /> </DxColumn>
</DxColumn> <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="" :width="150"
css-class="custom-table-column" /> alignment="center"
</DxColumn> caption="b"
</DxColumn> data-type="number"
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column"> data-field=""
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="" />
css-class="custom-table-column" /> </DxColumn>
</DxColumn> <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field="" :width="150"
css-class="custom-table-column" /> alignment="center"
</DxColumn> caption="c=a/b"
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="" data-field=""
css-class="custom-table-column" /> css-class="custom-table-column"
</DxColumn> />
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column"> </DxColumn>
<DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="" <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field="" caption="d"
css-class="custom-table-column" /> data-type="number"
</DxColumn> data-field=""
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column"> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="" />
css-class="custom-table-column" /> </DxColumn>
</DxColumn> <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
</DxColumn> <DxColumn
</DxColumn> :width="150"
</DxDataGrid> alignment="center"
</div> caption="e"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="a"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="b"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="c=a/b"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="d"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="e"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
caption="f=d/e"
data-type="number"
data-field=""
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -81,7 +184,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -98,37 +210,37 @@ const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const monalisaJumlahDurasiRptRctKeluhan = gql` const monalisaJumlahDurasiRptRctKeluhan = gql`
query DaftarmonalisaJumlahDurasiRptRctKeluhan( query DaftarmonalisaJumlahDurasiRptRctKeluhan(
@ -164,43 +276,43 @@ const monalisaJumlahDurasiRptRctKeluhan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, { const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => { queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,34 +1,77 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" <DxColumn
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" :width="50"
css-class="custom-table-column" /> alignment="center"
<DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" /> :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
<DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan" caption="NO"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" />
css-class="custom-table-column" /> <DxColumn
<DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%" alignment="center"
css-class="custom-table-column" /> data-field="id_keluhan"
caption="ID Keluhan"
</DxDataGrid> css-class="custom-table-column"
</div> />
<DxColumn
alignment="center"
data-field="jenis_keluhan"
caption="Jenis Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="jumlah"
caption="Jumlah"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="persen_keluhan"
caption="%"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -36,7 +79,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -53,37 +105,37 @@ const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const monalisaKeluhanPerJenisKeluhan = gql` const monalisaKeluhanPerJenisKeluhan = gql`
query DaftarmonalisaKeluhanPerJenisKeluhan( query DaftarmonalisaKeluhanPerJenisKeluhan(
@ -110,42 +162,42 @@ const monalisaKeluhanPerJenisKeluhan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, { const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, {
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaKeluhanPerJenisKeluhan.forEach((item: any) => { queryResult.data.monalisaKeluhanPerJenisKeluhan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,42 +1,104 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column"> alignment="center"
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Nama Unit"
:caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" />
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%" <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column"> alignment="center"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" data-field="jumlah_bulan"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" /> data-type="number"
<DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%" />
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="150"
</DxColumn> alignment="center"
</DxDataGrid> data-field="jumlah_bulan_n_1"
</div> data-type="number"
:caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_bulan"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="jumlah_tahun_n_1"
data-type="number"
:caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_tahun"
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -44,7 +106,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -64,37 +135,37 @@ const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth()) const bulanSekarang = ref(new Date().getMonth())
const tahunLalu = ref(tahunSekarang.value - 1) const tahunLalu = ref(tahunSekarang.value - 1)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const monalisaRekapitulasiLaporUlangKeluhan = gql` const monalisaRekapitulasiLaporUlangKeluhan = gql`
query DaftarmonalisaRekapitulasiLaporUlangKeluhan( query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
@ -124,44 +195,44 @@ const monalisaRekapitulasiLaporUlangKeluhan = gql`
} }
` `
const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, { const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, {
bulan: 10, bulan: 10,
tahun: 2023, tahun: 2023,
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params; const { regional, posko, idUid, idUp3, bulan, tahun } = params
bulanSekarang.value = bulan.id; bulanSekarang.value = bulan.id
tahunSekarang.value = tahun.id; tahunSekarang.value = tahun.id
tahunLalu.value = tahun.id - 1; tahunLalu.value = tahun.id - 1
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.forEach((item: any) => { queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,29 +1,73 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column"> <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="keluhan" data-type="number" caption="Keluhan" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi" alignment="center"
css-class="custom-table-column" /> data-field="keluhan"
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" data-type="number"
css-class="custom-table-column" /> caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxDataGrid> </DxDataGrid>
</div> </div>

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

@ -1,90 +1,255 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :data-source="data"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :enabled="false" /> :show-borders="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :row-alternation-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" :hover-state-enabled="true"
v-if="loading" v-model:visible="loading" :enabled="true" /> @selection-changed="onSelectionChanged"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> :column-width="100"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> @exporting="onExporting"
<DxColumnFixing :enabled="true" /> :allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`" alignment="center"
css-class="custom-table-column"> data-field="nama_posko"
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Nama Unit"
caption="Keluhan" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" />
caption="Gangguan" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> alignment="center"
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
caption="Keluhan" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" >
caption="Gangguan" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" :width="120"
caption="Total" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="keluhan_bulan_lalu"
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" caption="Keluhan"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
css-class="custom-table-column" /> <DxColumn
</DxColumn> :width="120"
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" alignment="center"
data-field="total_komplain_bulan_lalu" data-type="number" /> data-field="gangguan_bulan_lalu"
</DxColumn> data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="informasi_keluhan_bulan_lalu"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="informasi_gangguan_bulan_lalu"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_bulan_lalu"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn
alignment="center"
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_komplain_bulan_lalu"
data-type="number"
/>
</DxColumn>
<DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" <DxColumn
caption="Keluhan" css-class="custom-table-column" /> :width="120"
<DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" alignment="center"
caption="Gangguan" css-class="custom-table-column" /> data-field="keluhan_bulan_ini"
<DxColumn alignment="center" caption="Informasi" css-class="custom-table-column"> data-type="number"
<DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
caption="Keluhan" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" />
caption="Gangguan" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" :width="120"
caption="Total" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="keluhan_bulan_lalu"
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml" caption="Gangguan"
css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
css-class="custom-table-column" /> <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
</DxColumn> <DxColumn
<DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" :width="120"
data-field="total_komplain_bulan_ini" data-type="number" /> alignment="center"
</DxColumn> data-field="informasi_keluhan_bulan_ini"
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
caption="Keluhan" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" />
caption="Gangguan" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" :width="120"
caption="Informasi" css-class="custom-table-column" /> alignment="center"
</DxColumn> data-field="informasi_gangguan_bulan_ini"
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column"> data-type="number"
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Gangguan"
caption="Keluhan" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" />
caption="Gangguan" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" :width="120"
caption="Informasi" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" data-field="total_bulan_ini"
caption="% Total" css-class="custom-table-column" /> data-type="number"
</DxColumn> caption="Total"
css-class="custom-table-column"
</DxDataGrid> />
</div> </DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="Jml"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
data-type="number"
caption="%"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn
alignment="center"
caption="Total Komplain"
css-class="custom-table-column"
data-field="total_komplain_bulan_ini"
data-type="number"
/>
</DxColumn>
<DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="delta_penurunan_keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_penurunan_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="delta_penurunan_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
/>
</DxColumn>
<DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_keluhan"
data-type="number"
caption="Keluhan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_gangguan"
data-type="number"
caption="Gangguan"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_informasi"
data-type="number"
caption="Informasi"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="persen_penurunan_total"
data-type="number"
caption="% Total"
css-class="custom-table-column"
/>
</DxColumn>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -92,7 +257,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -111,43 +285,43 @@ const showDetail = ref(false)
const tahunSekarang = ref(new Date().getFullYear()) const tahunSekarang = ref(new Date().getFullYear())
const bulanSekarang = ref(new Date().getMonth()) const bulanSekarang = ref(new Date().getMonth())
if (bulanSekarang.value - 1 == 0) { if (bulanSekarang.value - 1 == 0) {
let bulanLalu = 12 let bulanLalu = 12
let tahunLalu = tahunSekarang.value - 1 let tahunLalu = tahunSekarang.value - 1
} else { } else {
let bulanLalu = bulanSekarang.value - 1 let bulanLalu = bulanSekarang.value - 1
let tahunLalu = tahunSekarang.value let tahunLalu = tahunSekarang.value
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const penurunanJumlahKomplainBulanan = gql` const penurunanJumlahKomplainBulanan = gql`
query DaftarpenurunanJumlahKomplainBulanan( query DaftarpenurunanJumlahKomplainBulanan(
@ -166,66 +340,66 @@ const penurunanJumlahKomplainBulanan = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
delta_penurunan_gangguan delta_penurunan_gangguan
delta_penurunan_informasi delta_penurunan_informasi
delta_penurunan_keluhan delta_penurunan_keluhan
gangguan_bulan_ini gangguan_bulan_ini
gangguan_bulan_lalu gangguan_bulan_lalu
informasi_gangguan_bulan_ini informasi_gangguan_bulan_ini
informasi_gangguan_bulan_lalu informasi_gangguan_bulan_lalu
informasi_keluhan_bulan_ini informasi_keluhan_bulan_ini
informasi_keluhan_bulan_lalu informasi_keluhan_bulan_lalu
keluhan_bulan_ini keluhan_bulan_ini
keluhan_bulan_lalu keluhan_bulan_lalu
nama_posko nama_posko
persen_penurunan_gangguan persen_penurunan_gangguan
persen_penurunan_informasi persen_penurunan_informasi
persen_penurunan_keluhan persen_penurunan_keluhan
persen_penurunan_total persen_penurunan_total
total_bulan_ini total_bulan_ini
total_bulan_lalu total_bulan_lalu
total_komplain_bulan_ini total_komplain_bulan_ini
total_komplain_bulan_lalu total_komplain_bulan_lalu
} }
} }
` `
const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, { const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
regional: '', regional: '',
posko: '', posko: '',
idUid: 0, idUid: 0,
idUp3: 0, idUp3: 0,
bulan: 10, bulan: 10,
tahun: 2023 tahun: 2023
}) })
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params const { regional, posko, idUid, idUp3, bulan, tahun } = params
refetch({ refetch({
regional: regional, regional: regional,
posko: posko ? posko.id : 0, posko: posko ? posko.id : 0,
idUid: idUid ? idUid.id : 0, idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0, idUp3: idUp3 ? idUp3.id : 0,
bulan: bulan ? bulan.id : 10, bulan: bulan ? bulan.id : 10,
tahun: bulan ? tahun.id : 2023 tahun: bulan ? tahun.id : 2023
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => { queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
data.value = [ data.value = [
...data.value, ...data.value,
{ {
...item ...item
} }
] ]
}) })
} }
console.log(queryResult.data) console.log(queryResult.data)
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,48 +1,124 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" alignment="center"
caption="Feb 2020" css-class="custom-table-column" /> caption="Rata-Rata RCT Gangguan"
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" css-class="custom-table-column"
caption="SLA (Menit)" css-class="custom-table-column" /> >
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_gangguan_bulan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_gangguan_sla"
data-type="number"
caption="SLA (Menit)"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" alignment="center"
caption="Feb 2020" css-class="custom-table-column" /> caption="Rata-Rata RCT Keluhan"
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" css-class="custom-table-column"
caption="SLA (Jam)" css-class="custom-table-column" /> >
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_keluhan_bulan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_keluhan_sla"
data-type="number"
caption="SLA (Jam)"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K" alignment="center"
css-class="custom-table-column" /> data-field="aging_komplain_gangguan"
data-type="number"
caption="G"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="aging_komplain_keluhan"
data-type="number"
caption="K"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" <DxColumn
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" /> :width="170"
alignment="center"
data-field="persen_rata_aging_komplain"
data-type="number"
caption="% Rata-Rata Aging Complains"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -53,7 +129,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -78,7 +163,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -89,7 +174,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -121,14 +206,14 @@ const agingComplaintBulanan = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
aging_komplain_gangguan aging_komplain_gangguan
aging_komplain_keluhan aging_komplain_keluhan
nama_posko nama_posko
persen_rata_aging_komplain persen_rata_aging_komplain
rata_rct_gangguan_bulan rata_rct_gangguan_bulan
rata_rct_gangguan_sla rata_rct_gangguan_sla
rata_rct_keluhan_bulan rata_rct_keluhan_bulan
rata_rct_keluhan_sla rata_rct_keluhan_sla
} }
} }
` `
@ -171,4 +256,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,38 +1,94 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column"> <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" alignment="center"
caption="Tidak Terencana" css-class="custom-table-column" /> data-field="ens_terencana"
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam" data-type="number"
css-class="custom-table-column" /> caption="Terencana"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="ens_tidak_terencana"
data-type="number"
caption="Tidak Terencana"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="ens_bencana_alam"
data-type="number"
caption="Bencana Alam"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS" alignment="center"
css-class="custom-table-column" /> data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="kpi_ens"
data-type="number"
caption="KPI ENS"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -42,7 +98,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -64,7 +129,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -75,7 +140,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -107,12 +172,12 @@ const agingComplaintBulanan = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
ens_bencana_alam ens_bencana_alam
ens_terencana ens_terencana
ens_tidak_terencana ens_tidak_terencana
kpi_ens kpi_ens
nama_posko nama_posko
total total
} }
} }
` `
@ -155,4 +220,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,40 +1,100 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" <DxDataGrid
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" class="max-h-[calc(100vh-140px)] mb-10"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" :data-source="data"
column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :min-width="250"
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column"> alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Kepatuhan dan Akurasi APKT"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" <DxColumn
data-type="number" caption="Jan 2020" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" alignment="center"
data-type="number" caption="Total Gangguan" css-class="custom-table-column" /> data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
data-type="number"
caption="Jan 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kepatuhan_akurasi_gangguan_berulang_total"
data-type="number"
caption="Total Gangguan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" <DxColumn
data-type="number" caption="Jan 2020" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" alignment="center"
data-type="number" caption="Total Keluhan" css-class="custom-table-column" /> data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
data-type="number"
caption="Jan 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kepatuhan_akurasi_keluhan_berulang_total"
data-type="number"
caption="Total Keluhan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" <DxColumn
caption="Komplain Pelanggan %" css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="persen_komplain_pelanggan"
data-type="number"
caption="Komplain Pelanggan %"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -44,7 +104,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -66,7 +135,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -77,7 +146,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -109,12 +178,12 @@ const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
kepatuhan_akurasi_gangguan_berulang_bulan kepatuhan_akurasi_gangguan_berulang_bulan
kepatuhan_akurasi_gangguan_berulang_total kepatuhan_akurasi_gangguan_berulang_total
kepatuhan_akurasi_keluhan_berulang_bulan kepatuhan_akurasi_keluhan_berulang_bulan
kepatuhan_akurasi_keluhan_berulang_total kepatuhan_akurasi_keluhan_berulang_total
nama_posko nama_posko
persen_komplain_pelanggan persen_komplain_pelanggan
} }
} }
` `
@ -157,4 +226,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,45 +1,120 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)] mb-10"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" alignment="center"
caption="Feb 2020" css-class="custom-table-column" /> caption="Rata-Rata RCT Gangguan"
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" css-class="custom-table-column"
caption="SLA (Menit)" css-class="custom-table-column" /> >
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_gangguan_bulan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_gangguan_sla"
data-type="number"
caption="SLA (Menit)"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" alignment="center"
caption="Feb 2020" css-class="custom-table-column" /> caption="Rata-Rata RCT Keluhan"
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" css-class="custom-table-column"
caption="SLA (Jam)" css-class="custom-table-column" /> >
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_keluhan_bulan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_keluhan_sla"
data-type="number"
caption="SLA (Jam)"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K" alignment="center"
css-class="custom-table-column" /> data-field="aging_komplain_gangguan"
data-type="number"
caption="G"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="aging_komplain_keluhan"
data-type="number"
caption="K"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" <DxColumn
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" /> :width="170"
alignment="center"
data-field="persen_rata_aging_komplain"
data-type="number"
caption="% Rata-Rata Aging Complains"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -49,7 +124,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -71,7 +155,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -82,7 +166,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -114,26 +198,26 @@ const penurunanJumlahKomplainKumulatif = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
delta_penurunan_gangguan delta_penurunan_gangguan
delta_penurunan_informasi delta_penurunan_informasi
delta_penurunan_keluhan delta_penurunan_keluhan
gangguan_bulan_ini gangguan_bulan_ini
gangguan_bulan_lalu gangguan_bulan_lalu
informasi_gangguan_bulan_ini informasi_gangguan_bulan_ini
informasi_gangguan_bulan_lalu informasi_gangguan_bulan_lalu
informasi_keluhan_bulan_ini informasi_keluhan_bulan_ini
informasi_keluhan_bulan_lalu informasi_keluhan_bulan_lalu
keluhan_bulan_ini keluhan_bulan_ini
keluhan_bulan_lalu keluhan_bulan_lalu
nama_posko nama_posko
persen_penurunan_gangguan persen_penurunan_gangguan
persen_penurunan_informasi persen_penurunan_informasi
persen_penurunan_keluhan persen_penurunan_keluhan
persen_penurunan_total persen_penurunan_total
total_bulan_ini total_bulan_ini
total_bulan_lalu total_bulan_lalu
total_komplain_bulan_ini total_komplain_bulan_ini
total_komplain_bulan_lalu total_komplain_bulan_lalu
} }
} }
` `
@ -176,4 +260,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,46 +1,121 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)] mb-10"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column"> <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
<DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" alignment="center"
caption="Feb 2020" css-class="custom-table-column" /> caption="Rata-Rata RCT Gangguan"
<DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" css-class="custom-table-column"
caption="SLA (Menit)" css-class="custom-table-column" /> >
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_gangguan_bulan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_gangguan_sla"
data-type="number"
caption="SLA (Menit)"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column"> <DxColumn
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" alignment="center"
caption="Feb 2020" css-class="custom-table-column" /> caption="Rata-Rata RCT Keluhan"
<DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" css-class="custom-table-column"
caption="SLA (Jam)" css-class="custom-table-column" /> >
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_keluhan_bulan"
data-type="number"
caption="Feb 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="rata_rct_keluhan_sla"
data-type="number"
caption="SLA (Jam)"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column"> <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K" alignment="center"
css-class="custom-table-column" /> data-field="aging_komplain_gangguan"
data-type="number"
caption="G"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="aging_komplain_keluhan"
data-type="number"
caption="K"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" <DxColumn
caption="% Rata-Rata Aging Complains" css-class="custom-table-column" /> :width="170"
alignment="center"
data-field="persen_rata_aging_komplain"
data-type="number"
caption="% Rata-Rata Aging Complains"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -50,7 +125,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -72,7 +156,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -83,7 +167,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -115,14 +199,14 @@ const agingComplaintKumulatif = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
aging_komplain_gangguan aging_komplain_gangguan
aging_komplain_keluhan aging_komplain_keluhan
nama_posko nama_posko
persen_rata_aging_komplain persen_rata_aging_komplain
rata_rct_gangguan_bulan rata_rct_gangguan_bulan
rata_rct_gangguan_sla rata_rct_gangguan_sla
rata_rct_keluhan_bulan rata_rct_keluhan_bulan
rata_rct_keluhan_sla rata_rct_keluhan_sla
} }
} }
` `
@ -165,4 +249,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,38 +1,93 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)] mb-10"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :show-column-lines="true"
:word-wrap-enabled="true"> :show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column"> <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn
css-class="custom-table-column" /> :width="170"
alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column"> <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana" <DxColumn
css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" alignment="center"
caption="Tidak Terencana" css-class="custom-table-column" /> data-field="ens_terencana"
<DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam" data-type="number"
css-class="custom-table-column" /> caption="Terencana"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="ens_tidak_terencana"
data-type="number"
caption="Tidak Terencana"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="ens_bencana_alam"
data-type="number"
caption="Bencana Alam"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn
css-class="custom-table-column" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS" alignment="center"
css-class="custom-table-column" /> data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field="kpi_ens"
data-type="number"
caption="KPI ENS"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -42,7 +97,16 @@ import { ref } from 'vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -65,7 +129,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -76,7 +140,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -108,23 +172,26 @@ const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
kepatuhan_akurasi_gangguan_berulang_bulan kepatuhan_akurasi_gangguan_berulang_bulan
kepatuhan_akurasi_gangguan_berulang_total kepatuhan_akurasi_gangguan_berulang_total
kepatuhan_akurasi_keluhan_berulang_bulan kepatuhan_akurasi_keluhan_berulang_bulan
kepatuhan_akurasi_keluhan_berulang_total kepatuhan_akurasi_keluhan_berulang_total
nama_posko nama_posko
persen_komplain_pelanggan persen_komplain_pelanggan
} }
} }
` `
const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, { const { onResult, onError, loading, refetch } = useQuery(
regional: '', kepatuhandanAkurasiDalamPelaporanKumulatif,
posko: '', {
idUid: 0, regional: '',
idUp3: 0, posko: '',
bulan: 10, idUid: 0,
tahun: 2023 idUp3: 0,
}) bulan: 10,
tahun: 2023
}
)
const filterData = (params: any) => { const filterData = (params: any) => {
const { regional, posko, idUid, idUp3, bulan, tahun } = params const { regional, posko, idUid, idUp3, bulan, tahun } = params
@ -156,4 +223,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,38 +1,97 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type2 @update:filters="(value) => filters = value" /> <Type2 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)] mb-10"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> :show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :enabled="false" /> <DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> <DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel
v-if="loading" v-model:visible="loading" :enabled="true" /> :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 :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> <DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" /> <DxColumn
<DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column"> alignment="center"
data-field="nama_posko"
caption="Nama Unit"
css-class="custom-table-column"
/>
<DxColumn
alignment="center"
caption="Kepatuhan dan Akurasi APKT"
css-class="custom-table-column"
>
<DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" <DxColumn
data-type="number" caption="Jan 2020" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" alignment="center"
data-type="number" caption="Total Gangguan" css-class="custom-table-column" /> data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
data-type="number"
caption="Jan 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kepatuhan_akurasi_gangguan_berulang_total"
data-type="number"
caption="Total Gangguan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
<DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column"> <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" <DxColumn
data-type="number" caption="Jan 2020" css-class="custom-table-column" /> :width="150"
<DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" alignment="center"
data-type="number" caption="Total Keluhan" css-class="custom-table-column" /> data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
data-type="number"
caption="Jan 2020"
css-class="custom-table-column"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kepatuhan_akurasi_keluhan_berulang_total"
data-type="number"
caption="Total Keluhan"
css-class="custom-table-column"
/>
</DxColumn> </DxColumn>
</DxColumn> </DxColumn>
<DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" <DxColumn
caption="Komplain Pelanggan %" css-class="custom-table-column" /> :width="150"
alignment="center"
data-field="persen_komplain_pelanggan"
data-type="number"
caption="Komplain Pelanggan %"
css-class="custom-table-column"
/>
</DxDataGrid> </DxDataGrid>
</div> </div>
</template> </template>
@ -42,7 +101,16 @@ import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue' import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -65,7 +133,7 @@ const onExporting = (e: any) => {
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
@ -76,7 +144,7 @@ const onExporting = (e: any) => {
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@ -108,12 +176,12 @@ const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
bulan: $bulan bulan: $bulan
tahun: $tahun tahun: $tahun
) { ) {
kepatuhan_akurasi_gangguan_berulang_bulan kepatuhan_akurasi_gangguan_berulang_bulan
kepatuhan_akurasi_gangguan_berulang_total kepatuhan_akurasi_gangguan_berulang_total
kepatuhan_akurasi_keluhan_berulang_bulan kepatuhan_akurasi_keluhan_berulang_bulan
kepatuhan_akurasi_keluhan_berulang_total kepatuhan_akurasi_keluhan_berulang_total
nama_posko nama_posko
persen_komplain_pelanggan persen_komplain_pelanggan
} }
} }
` `
@ -156,4 +224,4 @@ const filterData = (params: any) => {
}) })
} }
const filters = ref() const filters = ref()
</script> </script>

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

@ -1,50 +1,157 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type15 @update:filters="(value) => filters = value" /> <Type15 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100" class="max-h-[calc(100vh-140px)] mb-10"
@exporting="" :allow-column-resizing="true" column-resizing-mode="widget"> :show-column-lines="true"
<DxSelection mode="single" /> :show-row-lines="false"
<DxPaging :page-size="5" :enabled="true" /> :show-borders="true"
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true" :row-alternation-enabled="true"
:show-info="true" :show-navigation-buttons="true" /> :hover-state-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @selection-changed=""
v-if="loading" v-model:visible="loading" :enabled="true" /> :column-width="100"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting=""
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number" <DxColumn
caption="No" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="No. Laporan" /> :width="50"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Lapor" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" data-field=""
caption="IDPEL/NO METER" /> data-type="number"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="No"
caption="Nama Pelapor" /> />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" <DxColumn
caption="Alamat Pelapor" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" :width="170"
caption="No Tlp Pelapor" /> alignment="center"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Status" /> data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UI Dist." /> caption="No. Laporan"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="UP 3" /> />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko/ULP" /> <DxColumn
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Petugas" /> css-class="custom-table-column"
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" :width="170"
caption="Keterangan DLPD" /> alignment="center"
data-field=""
</DxDataGrid> caption="Tgl Lapor"
</div> />
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="IDPEL/NO METER"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Nama Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Alamat Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="No Tlp Pelapor"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Status"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="UI Dist."
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="UP 3"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Posko/ULP"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Petugas"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field=""
caption="Keterangan DLPD"
/>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
import { Type15 } from '@/components/Form/FiltersType'; DxColumn,
import Filters from '@/components/Form/Filters.vue'; DxExport,
DxLoadPanel,
DxPager,
DxPaging,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { Type15 } from '@/components/Form/FiltersType'
import Filters from '@/components/Form/Filters.vue'
const position = { of: '#data' } const position = { of: '#data' }
const showIndicator = ref(true) const showIndicator = ref(true)
const shading = ref(true) const shading = ref(true)
@ -53,10 +160,10 @@ const data = ref<any[]>([])
const dataDetail = ref<any>() const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = ref(false) const loading = ref(false)
const filters = ref(); const filters = ref()
const filterData = async (filters: any) => { const filterData = async (filters: any) => {
loading.value = true loading.value = true
await new Promise((resolve) => setTimeout(resolve, 1000)) await new Promise((resolve) => setTimeout(resolve, 1000))
loading.value = false loading.value = false
} }
</script> </script>

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

@ -1,43 +1,144 @@
<template> <template>
<Filters @run-search="() => filterData(filters)" class="mb-4"> <Filters @run-search="() => filterData(filters)" class="mb-4">
<Type17 @update:filters="(value) => filters = value" /> <Type17 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" <DxDataGrid
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" class="max-h-[calc(100vh-140px)] mb-10"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :show-column-lines="true"
:word-wrap-enabled="true" @row-prepared="onRowPrepared"> :show-row-lines="false"
<DxSelection mode="single" /> :show-borders="true"
<DxPaging :enabled="false" /> :row-alternation-enabled="true"
<DxScrolling column-rendering-mode="virtual" mode="virtual" /> :hover-state-enabled="true"
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" @selection-changed="onSelectionChanged"
v-if="loading" v-model:visible="loading" :enabled="true" /> :column-width="100"
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> @exporting="onExporting"
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> :allow-column-resizing="true"
<DxColumnFixing :enabled="true" /> column-resizing-mode="widget"
:word-wrap-enabled="true"
@row-prepared="onRowPrepared"
>
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<DxLoadPanel
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/>
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumnFixing :enabled="true" />
<DxColumn :width="170" alignment="center" data-field="" caption="No.Lapor" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="170" alignment="center" data-field="" caption="Tipe Isu" css-class="custom-table-column" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="" caption="Nama" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" /> data-field=""
<DxColumn :width="170" alignment="center" data-field="" caption="No.Telp" css-class="custom-table-column" /> caption="No.Lapor"
<DxColumn :width="170" alignment="center" data-field="" caption="Permasalahan" css-class="custom-table-column"
css-class="custom-table-column" /> />
<DxColumn :width="170" alignment="center" data-field="" caption="Deskripsi" css-class="custom-table-column" /> <DxColumn
<DxColumn :width="170" alignment="center" data-field="" caption="Tgl Buat" css-class="custom-table-column" /> :width="170"
<DxColumn :width="170" alignment="center" data-field="" caption="Lap.Ulang" css-class="custom-table-column" /> alignment="center"
<DxColumn :width="170" alignment="center" data-field="" caption="Ket.Lap.Ulang" data-field=""
css-class="custom-table-column" /> caption="Tipe Isu"
<DxColumn :width="170" alignment="center" data-field="" caption="Status" css-class="custom-table-column" /> css-class="custom-table-column"
<DxColumn :width="170" alignment="center" data-field="" caption="Durasi" css-class="custom-table-column" /> />
</DxDataGrid> <DxColumn
</div> :width="170"
alignment="center"
data-field=""
caption="Nama"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Unit"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="No.Telp"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Permasalahan"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Deskripsi"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Tgl Buat"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Lap.Ulang"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Ket.Lap.Ulang"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Status"
css-class="custom-table-column"
/>
<DxColumn
:width="170"
alignment="center"
data-field=""
caption="Durasi"
css-class="custom-table-column"
/>
</DxDataGrid>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' import {
DxColumn,
DxColumnFixing,
DxExport,
DxLoadPanel,
DxPaging,
DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -53,98 +154,98 @@ const dataDetail = ref<any>()
const showDetail = ref(false) const showDetail = ref(false)
const loading = ref(false) const loading = ref(false)
const onExporting = (e: any) => { const onExporting = (e: any) => {
if (e.format === 'pdf') { if (e.format === 'pdf') {
const doc = new jsPDF() const doc = new jsPDF()
exportToPdf({ exportToPdf({
jsPDFDocument: doc, jsPDFDocument: doc,
component: e.component, component: e.component,
indent: 5, indent: 5
}).then(() => { }).then(() => {
doc.save(`.pdf`) doc.save(`.pdf`)
}) })
} else { } else {
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet('Employees') const worksheet = workbook.addWorksheet('Employees')
exportToExcel({ exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx') saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
}) })
}) })
e.cancel = true e.cancel = true
} }
} }
const onSelectionChanged = ({ selectedRowsData }: any) => { const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0] const data = selectedRowsData[0]
console.log(data) console.log(data)
} }
const onRowPrepared = (e: any) => { const onRowPrepared = (e: any) => {
if (e.rowType === "data") { if (e.rowType === 'data') {
if (e.data.Speed > e.data.SpeedLimit) { if (e.data.Speed > e.data.SpeedLimit) {
// e.cellElement.style.cssText = "color: white; background-color: red"; // e.cellElement.style.cssText = "color: white; background-color: red";
// or // or
e.rowElement.classList.add("my-class"); e.rowElement.classList.add('my-class')
// To override alternation color // To override alternation color
// e.rowElement.className = e.rowElement.className.replace("dx-row-alt", ""); // e.rowElement.className = e.rowElement.className.replace("dx-row-alt", "");
}
} }
}
} }
const data = [ const data = [
{ {
noLapor: 'K2316081000039', noLapor: 'K2316081000039',
tipeIsu: 'PDPB', tipeIsu: 'PDPB',
nama: 'BAPAK HAIRUL', nama: 'BAPAK HAIRUL',
unit: 'ULP BARABAI', unit: 'ULP BARABAI',
noTelp: '081350000000', noTelp: '081350000000',
permasalahan: 'MCB KWH SERING TURUN', permasalahan: 'MCB KWH SERING TURUN',
deskripsi: '-', deskripsi: '-',
tglBuat: '10/08/2016 07:18:17', tglBuat: '10/08/2016 07:18:17',
lapUlang: 0, lapUlang: 0,
ketLapUlang: '-', ketLapUlang: '-',
status: 'Dalam Proses Manager Unit', status: 'Dalam Proses Manager Unit',
durasi: '2638 01:59:17' durasi: '2638 01:59:17'
}, },
{ {
noLapor: 'K2316081000039', noLapor: 'K2316081000039',
tipeIsu: 'PDPB', tipeIsu: 'PDPB',
nama: 'BAPAK HAIRUL', nama: 'BAPAK HAIRUL',
unit: 'ULP BARABAI', unit: 'ULP BARABAI',
noTelp: '081350000000', noTelp: '081350000000',
permasalahan: 'MCB KWH SERING TURUN', permasalahan: 'MCB KWH SERING TURUN',
deskripsi: '-', deskripsi: '-',
tglBuat: '10/08/2016 07:18:17', tglBuat: '10/08/2016 07:18:17',
lapUlang: 0, lapUlang: 0,
ketLapUlang: '-', ketLapUlang: '-',
status: 'Dalam Proses Manager Unit', status: 'Dalam Proses Manager Unit',
durasi: '2638 01:59:17' durasi: '2638 01:59:17'
}, },
{ {
noLapor: 'K2316081000039', noLapor: 'K2316081000039',
tipeIsu: 'PDPB', tipeIsu: 'PDPB',
nama: 'BAPAK HAIRUL', nama: 'BAPAK HAIRUL',
unit: 'ULP BARABAI', unit: 'ULP BARABAI',
noTelp: '081350000000', noTelp: '081350000000',
permasalahan: 'MCB KWH SERING TURUN', permasalahan: 'MCB KWH SERING TURUN',
deskripsi: '-', deskripsi: '-',
tglBuat: '10/08/2016 07:18:17', tglBuat: '10/08/2016 07:18:17',
lapUlang: 0, lapUlang: 0,
ketLapUlang: '-', ketLapUlang: '-',
status: 'Dalam Proses Manager Unit', status: 'Dalam Proses Manager Unit',
durasi: '2638 01:59:17' durasi: '2638 01:59:17'
} }
] ]
const filters = ref(); const filters = ref()
const filterData = (filters: any) => { const filterData = (filters: any) => {
console.log(filters) console.log(filters)
} }
</script> </script>