Rekapitulasi Gangguan ALL s/d Diselesaikan Mobile APKT 7- 17

This commit is contained in:
probdg 2024-01-31 11:01:55 +07:00
parent e4a6fbb6b8
commit 949607f025
12 changed files with 774 additions and 127 deletions

View File

@ -157,6 +157,51 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import gql from 'graphql-tag';
import { useQuery } from '@vue/apollo-composable'
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
query rekapitulasiGangguanPerPosko(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanPerPosko(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -264,15 +309,81 @@ const createDummy = () => {
data.value = dummy;
}
const data = ref<any[]>([])
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
var i = 1;
queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
const entry = {
no : Number(i++),
posko: item.posko,
laporan: {
total: item.total,
sudahSelesai: {
jml: item.total_selesai,
persen: item.persen_selesai,
},
belumSelesai: {
jml: item.total_inproses,
persen:item.persen_inproses,
},
},
responseTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_response,
max: item.max_durasi_response,
min: item.min_durasi_response,
},
laporan: {
lebihSla: item.total_diatas_sla_response,
kurangSla: item.total_dibawah_sla_response,
},
},
recoveryTime: {
menit: {
total: 0,
rataRata: item.avg_durasi_recovery,
max: item.max_durasi_recovery,
min: item.min_durasi_recovery,
},
laporan: {
lebihSla: item.total_diatas_sla_recovery,
kurangSla: item.total_dibawah_sla_recovery,
},
}
};
data.value = [...data.value, entry];
})
data.value = [...data.value];
console.log(data.value)
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-8',
reportButton: true
})
createDummy()
// createDummy()
})
</script>

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -13,57 +13,57 @@
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -72,7 +72,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted ,ref} from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -81,7 +81,51 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag';
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
query rekapitulasiGangguanPerRegu(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanPerRegu(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
nama_regu
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
posko
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -115,10 +159,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerRegu;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-9'
})

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
@ -13,57 +13,57 @@
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
<DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
<DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
<DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
css-class="custom-table-column" />
<DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
css-class="custom-table-column" />
</DxColumn>
</DxColumn>
@ -72,7 +72,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -81,7 +81,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag';
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -116,9 +117,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
query rekapitulasiGangguanPerTanggal(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanPerTanggal(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_durasi_dispatch
avg_durasi_recovery
avg_durasi_response
id_uid
id_up3
max_durasi_dispatch
max_durasi_recovery
max_durasi_response
min_durasi_dispatch
min_durasi_recovery
min_durasi_response
persen_inproses
persen_selesai
tanggal
total
total_diatas_sla_dispatch
total_diatas_sla_recovery
total_diatas_sla_response
total_dibawah_sla_dispatch
total_dibawah_sla_recovery
total_dibawah_sla_response
total_inproses
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-9'
})

View File

@ -1,9 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -13,18 +13,11 @@
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
<DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
css-class="custom-table-column" />
<DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" />
</DxColumn>
</DxDataGrid>
@ -32,7 +25,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -41,7 +34,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag';
const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF()
@ -76,9 +70,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
query rekapitulasiGangguanBerdasarkanMedia(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanBerdasarkanMedia(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
media
tgl1
tgl10
tgl11
tgl12
tgl13
tgl14
tgl15
tgl16
tgl17
tgl18
tgl19
tgl2
tgl20
tgl21
tgl22
tgl23
tgl24
tgl25
tgl26
tgl27
tgl28
tgl29
tgl3
tgl30
tgl31
tgl4
tgl5
tgl6
tgl7
tgl8
tgl9
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -12,17 +12,17 @@
<DxColumnFixing :enabled="true" />
<DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" caption="Posko IN" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="" caption="Posko OUT" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
<DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
<DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
</DxDataGrid>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -31,6 +31,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -65,10 +67,55 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanAlihPosko
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanAlihPosko
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
id_uid
id_up3
posko
posko_in
posko_out
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanAlihPosko
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
<DxSelection mode="single" />
@ -15,30 +15,30 @@
<DxColumn :width="50" alignment="center" data-field="" 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="" caption="b" 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="" caption="c" 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" caption="d=(e+g)" 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" caption="e" 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" caption="f=(e/d)*100" 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" caption="g" 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" caption="h=(g/d)*100" 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>
@ -48,20 +48,20 @@
<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" caption="i" 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" caption="j=(i/d)*100"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/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" caption="k" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="l" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -69,20 +69,20 @@
<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" caption="m" 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" caption="n=(m/d)*100"
<DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/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" caption="o" 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" caption="p" 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>
@ -92,20 +92,20 @@
<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" caption="q" 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" caption="r=(q/d)*100"
<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" caption="s" 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" caption="t" 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>
@ -113,20 +113,20 @@
<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" caption="u" 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" caption="v=(u/d)*100"
<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" caption="w" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="w" css-class="custom-table-column" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn :width="150" alignment="center" caption="x" css-class="custom-table-column" />
<DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="x" css-class="custom-table-column" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -138,7 +138,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -147,6 +147,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -181,10 +183,73 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const data = selectedRowsData[0]
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
query rekapitulasiGangguanDiselesaikanMobileAPKT
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanDiselesaikanMobileAPKT
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
avg_waktu_recovery_mobile_marking
avg_waktu_recovery_mobile_nonmarking
avg_waktu_recovery_nonmobile_marking
avg_waktu_recovery_nonmobile_nonmarking
avg_waktu_response_mobile_marking
avg_waktu_response_mobile_nonmarking
avg_waktu_response_nonmobile_marking
avg_waktu_response_nonmobile_nonmarking
kode_regu
persen_belum_selesai
persen_laporan_mobile_marking
persen_laporan_mobile_nonmarking
persen_laporan_nonmobile_marking
persen_laporan_nonmobile_nonmarking
persen_selesai
regu
total_belum_selesai
total_laporan
total_laporan_mobile_marking
total_laporan_mobile_nonmarking
total_laporan_nonmobile_marking
total_laporan_nonmobile_nonmarking
total_selesai
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(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: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

View File

@ -1,8 +1,9 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
@ -72,8 +73,8 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import type { Rekap1 } from '@/types/gangguan'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
const data = ref<Rekap1[]>([])
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -139,10 +140,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
query rekapitulasiGangguanRatingPerPosko
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanRatingPerPosko
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
createDummy()
const filters = useFiltersStore()
const { onResult, onError } = useQuery(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),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
@ -62,7 +62,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -71,6 +71,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -107,9 +109,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanRatingPerRegu
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanRatingPerRegu
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
in_process
indeks_rating
jumlah_non_rating
jumlah_rating
nama_posko
persen_in_process
persen_non_rating
persen_rating
persen_selesai
rating_1
rating_2
rating_3
rating_4
rating_5
regu
selesai
total
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
@ -43,7 +43,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -52,6 +52,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -88,9 +90,65 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
query rekapitulasiGangguanKoreksiTransaksiIndividual
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanKoreksiTransaksiIndividual
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
agustus
april
desember
februari
januari
juli
juni
maret
mei
november
oktober
september
uid
ulp
up3
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(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: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

View File

@ -1,6 +1,6 @@
<template>
<div>
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
@ -43,7 +43,7 @@
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@ -52,6 +52,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
const onExporting = (e: any) => {
if (e.format === 'pdf') {
@ -88,9 +90,65 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
console.log(data)
}
const data = ref<any[]>([])
const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
query rekapitulasiGangguanCleansingTransaksiTM
(
$dateFrom: Date!
$dateTo: Date!
$posko: String!
$idUid: Int!
$idUp3: Int!
) {
rekapitulasiGangguanCleansingTransaksiTM
(
dateFrom: $dateFrom
dateTo: $dateTo
posko: $posko
idUid: $idUid
idUp3: $idUp3
) {
agustus
april
desember
februari
januari
juli
juni
maret
mei
november
oktober
september
uid
ulp
up3
}
}`;
const loadingVisible = ref<boolean>(true)
onMounted(() => {
const filters = useFiltersStore()
const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
onResult(queryResult => {
if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
;
loadingVisible.value = false
}
console.log(queryResult.data)
console.log(queryResult.loading)
console.log(queryResult.networkStatus)
})
onError((error) => {
console.log(error)
})
filters.setConfig({
type: 'type-1',
reportButton: true

View File

@ -13,30 +13,30 @@
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
caption="Tgl Response" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
caption="Tgl Recovery" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
caption="Sumber Lapor" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Posko" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
</DxDataGrid>
</div>

View File

@ -73,7 +73,6 @@ import { onMounted, ref } from 'vue'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import type { Rekap1 } from '@/types/gangguan'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
@ -171,8 +170,9 @@ onMounted(() => {
loadingVisible.value = true
if (queryResult.data != undefined) {
queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
data.value = [...data.value,item,{
nama_unit:'-'
data.value = [...data.value,{
...item,
nama_unit: 'UNIT'
}];
})