Rekapitulasi Keluhan Per Kelompok Keluhan

src/components/Pages/Keluhan/Table_32.vue

@@ -1,87 +1,224 @@
 <template>
   <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      class="max-h-[calc(100vh-140px)]"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :show-column-lines="true"
-            :word-wrap-enabled="true">
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
+      <DxColumn
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tanggal Lapor"
+        :width="50"
-                css-class="custom-table-column" />
+        alignment="center"
+        data-field=""
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+        <DxColumn
-                    css-class="custom-table-column" />
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            data-type="number"
-                        css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column"
-                        css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+            data-type="number"
-                        css-class="custom-table-column" />
+            caption="Total"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+            css-class="custom-table-column"
-                        css-class="custom-table-column" />
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn
-                        css-class="custom-table-column" />
+            :width="150"
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+            alignment="center"
-                        css-class="custom-table-column" />
+            data-field=""
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
-
     </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'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -90,7 +227,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-            indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -101,7 +238,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-            autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -117,9 +254,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
+const data = ref<any[]>([])
+const GET_DATA = gql`
+  query rekapitulasiKeluhanPerUnit(
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: String!
+    $idUid: Int!
+    $idUp3: Int!
+  ) {
+    rekapitulasiKeluhanPerUnit(
+      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)
 onMounted(() => {
   const filters = useFiltersStore()
+  const { onResult, onError } = useQuery(GET_DATA, {
+    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.rekapitulasiKeluhanPerUnit
+      loadingVisible.value = false
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
   filters.setConfig({
     type: 'type-13',
     reportButton: true