Daftar Gangguan Dialihkan Ke Posko Lain - Rekapitulasi Gangguan All

(Tabel 1 - Tabel 8)

package.json

@@ -15,7 +15,8 @@
     "prepare": "tw-patch install"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.8",
+    "@apollo/client": "^3.8.10",
+    "@apollo/link-context": "^2.0.0-beta.3",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "^2.0.18",
@@ -23,7 +24,9 @@
     "@phosphor-icons/vue": "^2.1.6",
     "@types/qs": "^6.9.9",
     "@types/uuid": "^9.0.2",
-    "@vue/apollo-option": "^4.0.0-beta.12",
+    "@vue/apollo-components": "^4.0.0",
+    "@vue/apollo-composable": "^4.0.1",
+    "@vue/apollo-option": "^4.0.0",
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
     "dotenv": "^16.3.1",
@@ -35,6 +38,8 @@
     "jspdf": "^2.5.1",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",

src/components/Form/FiltersType/Type1.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  const people = [
+    { id: 1, value: 'ULP GARUT', unavailable: true },
+    { id: 2, value: 'ULP SUMEDANG', unavailable: false },
+  ]
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select :data=people placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Pages/Gangguan/Table_1.vue

@@ -9,11 +9,15 @@
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxSelection mode="single" />
             <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel
+                v-model:visible="loadingVisible"
+             :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="number" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
+             data-type="number"
                 caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
@@ -28,17 +32,17 @@
                 caption="Tgl Response" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
                 caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
                 caption="Durasi Response Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery"
+            <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="170" alignment="center" data-field="posko_awal"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
                 caption="Posko Awal" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
                 caption="Posko Tujuan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status" caption="Status"
+            <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="id_pelanggan"
+            <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" />
@@ -48,7 +52,7 @@
                 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="sumber_laporan"
+            <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="posko" caption="Posko"
                 cell-template="data" />
@@ -194,6 +198,7 @@
 </template>
 
 <script setup lang="ts">
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { onMounted, ref } from 'vue'
@@ -203,20 +208,20 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import type { Data1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { writeDataJson } from '@/utils/storage'
+import { writeDataJson, readDataJson } from '@/utils/storage'
 import { useDialogStore } from '@/stores/dialog'
 import { useFiltersStore } from '@/stores/filters'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const dialog = useDialogStore()
-const data = ref<Data1[]>([])
+const data = ref<any[]>([])
-const dataDetail = ref<Data1>()
+const dataDetail = ref<any>()
 const showDetail = ref(false)
 const closeDetail = () => {
     showDetail.value = false
 }
-
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -246,32 +251,35 @@ const onExporting = (e: any) => {
     }
 }
 
-const createDummy = () => {
+const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
-    for (let i = 0; i < 100; i++) {
+  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
-        data.value.push({
+    daftarGangguanDialihkanKePoskoLain(
-            number: i + 1,
+      dateFrom: $dateFrom
-            no_laporan: 'G5223091' + (900002 + i),
+      dateTo: $dateTo
-            pembuat_laporan: 'agentjateng',
+      posko: $posko
-            tanggal_laporan: '19/09/2023 12:26:42',
+      idUid: $idUid
-            tanggal_dialihkan: '19/09/2023 12:33:46',
+      idUp3: $idUp3
-            tanggal_respon: '19/09/2023 13:14:15',
+    ) {
-            tanggal_recovery: '19/09/2023 13:14:15',
+      alamat_pelapor
-            durasi_respon: '0-0:47:32',
+      durasi_recovery_time
-            durasi_recovery: '0-0:49:35',
+      durasi_response_time
-            posko_awal: 'POSKO ULP UNGARAN.',
+      id_gangguan
-            posko_tujuan: 'POSKO ULP UNGARAN.',
+      idpel_nometer
-            status: 'Selesai',
+      keterangan_pelapor
-            id_pelanggan: '-',
+      media
-            nama_pelapor: 'Moegy',
+      nama_pelapor
-            alamat_pelapor: '-',
+      no_laporan
-            no_telp_pelapor: '085136661313',
+      no_telp_pelapor
-            keterangan_pelapor: '-',
+      posko_asal
-            sumber_laporan: 'Contact Center',
+      posko_tujuan
-            posko: 'POSKO ULP UNGGARAN'
+      status_akhir
-        });
+      waktu_recovery
+      waktu_response
     }
-    writeDataJson('data-daftar-1', data.value)
+  }
-}
+`;
+
+
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
@@ -283,10 +291,28 @@ const showData = () => {
     showDetail.value = true
 }
 
+const loadingVisible = ref<boolean>(true)
+
 onMounted(() => {
     const filters = useFiltersStore()
+    loadingVisible.value = true
+    const { onResult, variables } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
+        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.daftarGangguanDialihkanKePoskoLain;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
 
-    createDummy()
     filters.setConfig({
         type: 'type-1',
     })

src/components/Pages/Gangguan/Table_10.vue

@@ -1,13 +1,15 @@
+<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <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">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -73,7 +75,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'
@@ -82,7 +84,45 @@ 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';
 
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
+query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiRecoveryTime: Int!
+    $maxDurasiRecoveryTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarKeluhanRecoveryTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiRecoveryTime: $minDurasiRecoveryTime
+        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Gangguan/Table_11.vue

@@ -1,3 +1,4 @@
+<!-- Rekapitulasi Gangguan Per Posko -->
 <template>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Gangguan/Table_2.vue

@@ -8,12 +8,15 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel
+            v-model:visible.sync="loadingVisible"
+            :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"
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="no" data-type="number"
+            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-                caption="No" cell-template="data" />
+             data-type="number"
+                caption="No" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
                 caption="No Laporan" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_lapor"
@@ -22,15 +25,15 @@
                 caption="Tgl Response" cell-template="data" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_recovery"
                 caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
+            <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" caption="Status"
+            <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_no_meter"
+            <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" />
@@ -40,7 +43,7 @@
                 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="sumber_lapor"
+            <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="posko" caption="Posko"
                 cell-template="data" />
@@ -115,7 +118,7 @@
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     IDPEL/NO METER:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_no_meter" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
@@ -164,7 +167,9 @@ import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
 import InputText from '@/components/InputText.vue';
-
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+const data = ref<any[]>([])
 const dataDetail = ref<any>({})
 const showDetail = ref(false)
 
@@ -180,49 +185,55 @@ const showData = () => {
 const closeDetail = () => {
     showDetail.value = false
 }
-
+const loadingVisible = ref(true)
-const data = [
+const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI =gql`
-    {
+query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
-        no: 1,
+  daftarGangguanMelaporLebihDariSatuKali(
-        no_laporan: 'G5223091900003',
+    minJmlLapor: $minJmlLapor
-        tgl_lapor: '31/01/2023 15:33:19',
+    maxJmlLapor: $maxJmlLapor
-        tgl_response: '31/01/2023 16:56:25',
+    dateFrom: $dateFrom
-        tgl_recovery: '31/01/2023 17:08:28',
+    dateTo: $dateTo
-        jml_lapor: 1,
+    posko: $posko
-        durasi_response_time: '0-01:23:06',
+    idUid: $idUid
-        durasi_recovery_time: '0-01:35:08',
+    idUp3: $idUp3
-        status: 'Selesai',
+  ) {
-        idpel_no_meter: '523013252126 / 1731807',
+    alamat_pelapor
-        nama_pelapor: 'IBU FELISIA',
+    durasi_response_time
-        alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
+    id_gangguan
-        no_telp_pelapor: '082229870235',
+    idpel_nometer
-        keterangan_pelapor: '-',
+    jumlah_lapor
-        sumber_lapor: '-',
+    keterangan_pelapor
-        posko: 'POSKO ULP SEMARANG',
+    media
-    },
+    nama_pelapor
-    {
+    no_laporan
-        no: 2,
+    no_telp_pelapor
-        no_laporan: 'G5223091900673',
+    posko
-        tgl_lapor: '31/01/2023 12:35:37',
+    status_akhir
-        tgl_response: '31/01/2023 13:39:01',
+    waktu_recovery
-        tgl_recovery: '31/01/2023 14:10:53',
+    waktu_response
-        jml_lapor: 1,
+  }
-        durasi_response_time: '0-01:03:24',
+}`;
-        durasi_recovery_time: '0-01:35:16',
-        status: 'Selesai',
-        idpel_no_meter: '523013252126 / 1731807',
-        nama_pelapor: 'BP TUPANDIYO',
-        alamat_pelapor: 'JL TAMBAKA RT-4 / RW-12 NO.24 GG ABU',
-        no_telp_pelapor: '0248660457',
-        keterangan_pelapor: '-',
-        sumber_lapor: '-',
-        posko: 'POSKO ULP SEMARANG',
-    }
-]
 
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, variables } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
+        minJmlLapor: 2,
+        maxJmlLapor: 100,
+        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.daftarGangguanMelaporLebihDariSatuKali;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
     filters.setConfig({
         type: 'type-6',
     })

src/components/Pages/Gangguan/Table_3.vue

@@ -1,56 +1,115 @@
 <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loadingVisible" :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="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No" />
+                caption="No Laporan" />
-            <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="tgl_lapor"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+                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="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="status_akhir"
-            <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="referensi_marking"
                 caption="Referensi Marking" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <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="170" alignment="center" data-field="" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
+const data = ref<any[]>([])
 
+const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
+query daftarGangguanResponseTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiResponseTime: Int!
+    $maxDurasiResponseTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanResponseTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiResponseTime: $minDurasiResponseTime
+        maxDurasiResponseTime: $maxDurasiResponseTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+    }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, variables } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        minDurasiResponseTime: 1, //menit
+        maxDurasiResponseTime: 1,// menit
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanResponseTime;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
     filters.setConfig({
         type: 'type-7',
     })

src/components/Pages/Gangguan/Table_4.vue

@@ -7,52 +7,108 @@
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+                <DxLoadPanel v-model:visible.sync="loadingVisible" :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="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-                caption="No" />
+            <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="" caption="No Laporan" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
                 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="status_akhir" 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="referensi_marking"
                 caption="Referensi Marking" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
+            <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>
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
 
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
+query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiRecoveryTime: Int!
+    $maxDurasiRecoveryTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanRecoveryTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiRecoveryTime: $minDurasiRecoveryTime
+        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, variables } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        minDurasiRecoveryTime: 1, //menit
+        maxDurasiRecoveryTime: 43,// menit
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if(queryResult.data != undefined){
+            data.value = queryResult.data.daftarGangguanRecoveryTime;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
     filters.setConfig({
         type: 'type-7',
     })

src/components/Pages/Gangguan/Table_5.vue

@@ -1,56 +1,108 @@
 <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loadingVisible" :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="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" 
-                caption="No" />
+            caption="No Laporan" />
-            <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="tgl_lapor" 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="Tgl Lapor" />
+            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="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="status_akhir" 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="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>
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable';
 
+const data = ref<any[]>([])
+const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
+query daftarGangguanSelesaiTanpaIdPelanggan(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanSelesaiTanpaIdPelanggan(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, variables } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-31").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
     filters.setConfig({
         type: 'type-1',
     })

src/components/Pages/Gangguan/Table_6.vue

@@ -1,54 +1,106 @@
 <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"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
+            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loadingVisible" :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="50" alignment="center" data-field="" data-type="number"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="" caption="No Laporan" />
+            <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" />
-                caption="Nama Pelapor" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field=""
                 caption="Keterangan Pelapor" />
-            <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="status_akhir" caption="Status" />
-            <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="tgl_lapor" 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="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="Tgl Media" />
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_media" caption="Tgl Media" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
-                caption="Keterangan Media" />
 
         </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable';
 
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
+query daftarGangguanBerdasarkanMedia(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+    $media : String!
+) {
+    daftarGangguanBerdasarkanMedia(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+        media: $media
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(false)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, onError } = useQuery(GET_DAFTAR_GANGGUAN_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,
+        media : "Twitter"
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+            loadingVisible.value = false
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-16',
     })

src/components/Pages/Gangguan/Table_7.vue

@@ -1,18 +1,18 @@
 <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="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+                <DxLoadPanel v-model:visible.sync="loadingVisible" :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="50" alignment="center" data-field="" 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=""
@@ -43,14 +43,67 @@
 </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, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable';
 
+const data = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
+query daftarGangguanDiselesaikanMobileAPKT(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarGangguanDiselesaikanMobileAPKT(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(false)
 onMounted(() => {
     const filters = useFiltersStore()
-
+    const { onResult, onError } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
+        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+        posko: "",
+        idUid: 0,
+        idUp3: 0,
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
+            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',
     })

src/components/Pages/Gangguan/Table_8.vue

@@ -1,62 +1,64 @@
 <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" />
             <DxPaging :page-size="5" :enabled="true" />
             <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false"
+            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
+            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" :allow-resizing="false"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
+            <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
                 :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" :allow-resizing="false"
+            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" :allow-resizing="false"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number" caption="Rata-Rata"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number" caption=">SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number" caption="≤SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number" caption=">SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
                     :allow-resizing="false" css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -75,8 +77,51 @@ import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-const data = ref<Rekap1[]>([])
+import gql from 'graphql-tag';
+import { useQuery } from '@vue/apollo-composable'
 
+const data = ref<any[]>([])
+const GET_REKAPITULASI_GANGGUAN_ALL = gql`
+query rekapitulasiAllGangguan(
+    # $dateFrom: Date!
+    # $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    rekapitulasiAllGangguan(
+        # 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') {
         const doc = new jsPDF()
@@ -106,35 +151,6 @@ const onExporting = (e: any) => {
     }
 }
 
-const createDummy = () => {
-    for (let i = 0; i < 100; i++) {
-        data.value.push({
-            id: i,
-            nama_unit: '-',
-            total: 0,
-            selesai: '-',
-            in_progress: 0,
-            avg: 0,
-            max: 0,
-            min: 0,
-            dt_avg: 0,
-            dt_max: 0,
-            dt_min: 0,
-            dt_more_sla: 0,
-            dt_less_sla: 0,
-            rt_avg: 0,
-            rt_max: 0,
-            rt_min: 0,
-            rt_more_sla: 0,
-            rt_less_sla: 0,
-            ret_avg: 0,
-            ret_max: 0,
-            ret_min: 0,
-            ret_more_sla: 0,
-            ret_less_sla: 0,
-        });
-    }
-}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
@@ -142,10 +158,33 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 onMounted(() => {
-    createDummy()
 
     const filters = useFiltersStore()
+    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
+        // 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 => {
+        loadingVisible.value = true
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                data.value = [...data.value,item,{
+                    nama_unit:'-'
+                }];
                
+            })
+
+            loadingVisible.value = false
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
     filters.setConfig({
         type: 'type-1',
         reportButton: true

src/components/Pages/Gangguan/Table_9.vue

@@ -1,3 +1,4 @@
+<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -7,7 +8,7 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel v-model:visible.sync="loadingVisible" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -114,7 +115,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, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
@@ -123,7 +124,45 @@ 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';
 
+const dataReal = ref<any[]>([])
+const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
+query daftarGangguanRecoveryTime(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $minDurasiRecoveryTime: Int!
+    $maxDurasiRecoveryTime: Int!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+) {
+    daftarKeluhanRecoveryTime(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        minDurasiRecoveryTime: $minDurasiRecoveryTime
+        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+        posko: $posko
+        idUid: $idUid
+        idUp3: $idUp3
+    ) {
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_gangguan
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        no_laporan
+        no_telp_pelapor
+        posko
+        status_akhir
+        waktu_recovery
+        waktu_response
+        }
+}`;
+const loadingVisible = ref<boolean>(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/main.ts

@@ -1,20 +1,20 @@
 // import 'devextreme/dist/css/dx.material.blue.light.compact.css'
 import '@lottiefiles/lottie-player'
 import '@/assets/css/main.css'
-import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { createApolloProvider } from '@vue/apollo-option'
-import { apolloClient } from './utils/graphql'
 import App from './App.vue'
 import router from './router'
+import { createApp, provide, h } from 'vue'
+import { DefaultApolloClient } from '@vue/apollo-composable'
+import { apolloClient } from './utils/graphql'
 
-const app = createApp(App)
+const app = createApp({
-
+  setup() {
-const apolloProvider = createApolloProvider({
+    provide(DefaultApolloClient, apolloClient())
-    defaultClient: apolloClient,
+  },
-});
+  render: () => h(App),
+})
 
 app.use(createPinia())
-app.use(apolloProvider)
 app.use(router)
 app.mount('#app')

src/stores/queries.ts

@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import gql from 'graphql-tag'
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@vue/apollo-composable'
 
 export const useQueryStore = defineStore('query', () => {
     const getUser = useQuery(gql`

src/utils/graphql.ts

@@ -1,16 +1,24 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
-// HTTP connection to the API
+export const apolloClient = () => {
-const httpLink = createHttpLink({
-    // You should use an absolute URL here
-    uri: 'http://localhost:3020/graphql',
-})
 
-// Cache implementation
+  const httpLink =  createHttpLink({
-const cache = new InMemoryCache()
+    uri: 'http://10.8.0.13:8080/graphql',
+    credentials: 'include', // Include credentials for cross-origin requests
+  });
 
-// Create the apollo client
+
-export const apolloClient = new ApolloClient({
+  const apolloClient = new ApolloClient({
+    cache: new InMemoryCache(),
     link: httpLink,
-    cache,
+    headers: {
-})
+      Accept: 'application/json',
+      'Accept-Encoding': 'gzip, deflate',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+      'Content-Type': 'application/json',
+      // Add other headers as needed
+    },
+  });
+  return apolloClient;
+}