Add Monalisa dispatching time gangguan queries

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue

@@ -69,9 +69,9 @@
         "
       />
       <DxColumn
-        :width="150"
+        :width="250"
         alignment="center"
-        data-field="jenisGangguan"
+        data-field="tipe_permasalahan"
         caption="Jenis Gangguan"
         css-class="custom-table-column"
         cell-template="formatText"
@@ -80,7 +80,7 @@
         <DxColumn
           :width="120"
           alignment="center"
-          data-field="laporan.total"
+          data-field="total"
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
@@ -90,7 +90,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.sudahSelesai.jml"
+            data-field="total_selesai"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -99,7 +99,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.sudahSelesai.persen"
+            data-field="persen_selesai"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -110,7 +110,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.belumSelesai.jml"
+            data-field="total_inproses"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -119,7 +119,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.belumSelesai.persen"
+            data-field="persen_inproses"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -132,7 +132,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.total"
+            data-field="total_durasi_response"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -141,7 +141,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.rataRata"
+            data-field="avg_durasi_response"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -150,7 +150,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.max"
+            data-field="max_durasi_response"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -159,7 +159,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.min"
+            data-field="min_durasi_response"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -170,7 +170,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.lebihSla"
+            data-field="total_diatas_sla_response"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -179,7 +179,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_response"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -192,7 +192,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.total"
+            data-field="total_durasi_recovery"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -201,7 +201,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.rataRata"
+            data-field="avg_durasi_recovery"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -210,7 +210,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.max"
+            data-field="max_durasi_recovery"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -219,7 +219,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.min"
+            data-field="min_durasi_recovery"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -230,7 +230,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.lebihSla"
+            data-field="total_diatas_sla_recovery"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -239,7 +239,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_recovery"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -248,7 +248,7 @@
         </DxColumn>
       </DxColumn>
 
-      <DxSummary>
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
         <DxGroupItem
           :show-in-group-footer="true"
           column="no"
@@ -257,7 +257,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.total"
+          column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -265,7 +265,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.jml"
+          column="total_selesai"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -273,7 +273,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.persen"
+          column="persen_selesai"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -281,7 +281,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.jml"
+          column="total_inproses"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -289,7 +289,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.persen"
+          column="persen_inproses"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -297,7 +297,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.total"
+          column="total_durasi_response"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -305,7 +305,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.rataRata"
+          column="avg_durasi_response"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -313,7 +313,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.max"
+          column="max_durasi_response"
           summary-type="max"
           display-format="{0}"
           css-class="!text-right"
@@ -321,7 +321,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.min"
+          column="min_durasi_response"
           summary-type="min"
           display-format="{0}"
           css-class="!text-right"
@@ -329,7 +329,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.lebihSla"
+          column="total_diatas_sla_response"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -337,7 +337,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.kurangSla"
+          column="total_dibawah_sla_response"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -345,7 +345,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.total"
+          column="total_durasi_recovery"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -353,7 +353,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.rataRata"
+          column="avg_durasi_recovery"
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
@@ -361,7 +361,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.max"
+          column="max_durasi_recovery"
           summary-type="max"
           display-format="{0}"
           css-class="!text-right"
@@ -369,7 +369,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.min"
+          column="min_durasi_recovery"
           summary-type="min"
           display-format="{0}"
           css-class="!text-right"
@@ -377,7 +377,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.lebihSla"
+          column="total_diatas_sla_recovery"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -385,7 +385,7 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.kurangSla"
+          column="total_dibawah_sla_recovery"
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
@@ -563,46 +563,8 @@ const filterData = async (params: any) => {
         data.value = [...result.data.data.rekapitulasiPerJenisGangguan].map(
           (item: any, index: number) => {
             return {
-              no: ++index,
+              ...item,
-              sub_kelompok: item.sub_kelompok,
+              no: ++index
-              nama_sub_kelompok: item.nama_sub_kelompok,
-              kode: item.kode,
-              jenisGangguan: item.tipe_permasalahan,
-              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: item.total_durasi_response,
-                  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: item.total_durasi_recovery,
-                  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
-                }
-              }
             }
           }
         )
@@ -619,6 +581,50 @@ const filterData = async (params: any) => {
     })
 }
 
+let total = 0
+let total_selesai = 0
+let total_inproses = 0
+let count_durasi_dispatch = 0
+let total_durasi_dispatch = 0
+let count_durasi_response = 0
+let total_durasi_response = 0
+let count_durasi_recovery = 0
+let total_durasi_recovery = 0
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+    }
+  }
+
+  if (options.name === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+  }
+
+  if (options.name === 'total_inproses') {
+    if (options.summaryProcess === 'calculate') {
+      total_inproses += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_inproses
+    }
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total = 0
+      total_selesai = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = (total_selesai / total) * 100
+    }
+  }
+}
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -93,7 +93,7 @@
             data-type="number"
             :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberMomLastMonthLastYear"
           />
           <DxColumn
             :width="150"
@@ -102,7 +102,7 @@
             data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberMomCurrentMonthCurrentYear"
           />
           <DxColumn
             :width="70"
@@ -122,7 +122,7 @@
             data-type="number"
             :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberYoyCurrentMonthLastYear"
           />
           <DxColumn
             :width="150"
@@ -131,7 +131,7 @@
             data-type="number"
             :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberYoyCurrentMonthCurrentYear"
           />
           <DxColumn
             :width="70"
@@ -253,7 +253,67 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setRequirements('', 0, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberMomLastMonthLastYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('mom', lastMonth, lastYearMoM)"
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberMomCurrentMonthCurrentYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('mom', currentMonth, currentYear)"
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberYoyCurrentMonthLastYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('yoy', currentMonth, lastYear)"
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberYoyCurrentMonthCurrentYear="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="setRequirements('yoy', currentMonth, currentYear)"
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -265,7 +325,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p class="!text-left cursor-pointer" @click="setRequirements('', 0, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -748,6 +808,9 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const dataType = ref('')
+const dataYear = ref(new Date().getFullYear())
+const dataMonth = ref(new Date().getMonth())
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -763,6 +826,12 @@ const reportMeta = ref({
   lastYear: new Date().getFullYear() - 1
 })
 
+const setRequirements = (type: string, month: number, year: number) => {
+  dataType.value = type
+  dataYear.value = year
+  dataMonth.value = month
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
@@ -835,32 +904,30 @@ const filterData = async (params: any) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
+    bulan: dataMonth.value,
-      ? dateValue[0].split('-').reverse().join('-')
+    tahun: dataYear.value,
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    posko: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    idRegu: selected?.id_regu ? selected?.id_regu : 0,
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    media: selected?.media ? selected?.media : '',
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
-    isSelesai: 0,
-    tanggal: ''
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+  await requestGraphQl(
+    dataType.value == 'yoy'
+      ? queries.monalisa.gangguan.rekap.dispatchingTimeGangguanDetailYoy
+      : queries.monalisa.gangguan.rekap.dispatchingTimeGangguanDetailMom,
+    query
+  )
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailGangguan
+        if (dataType.value == 'yoy') {
+          dataSub.value = result.data.data.detailMonalisaDispatchingTimeGangguanYoy
+        } else {
+          dataSub.value = result.data.data.detailMonalisaDispatchingTimeGangguanMoM
+        }
       } else {
         dataSub.value = []
       }
@@ -882,7 +949,9 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  getDetail()
+  if (dataType.value == 'yoy' || dataType.value == 'mom') {
+    getDetail()
+  }
 }
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {

src/utils/api/api.graphql.ts

@@ -1972,6 +1972,116 @@ export const queries = {
   monalisa: {
     gangguan: {
       rekap: {
+        dispatchingTimeGangguanDetailYoy: gql`
+          query detailMonalisaDispatchingTimeGangguanYoY(
+            $bulan: Int!
+            $tahun: Int!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailMonalisaDispatchingTimeGangguanYoY(
+              bulan: $bulan
+              tahun: $tahun
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_posko
+              nama_posko
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_dispatch
+              waktu_response
+              waktu_recovery
+              durasi_dispatch_time
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              is_marking
+              referensi_marking
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              jarak_closing
+              dispatch_oleh
+              diselesaikan_oleh
+              penyebab
+              tindakan
+              kode_gangguan
+              jenis_gangguan
+              nilai_rating
+            }
+          }
+        `,
+        dispatchingTimeGangguanDetailMom: gql`
+          query detailMonalisaDispatchingTimeGangguanMoM(
+            $bulan: Int!
+            $tahun: Int!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailMonalisaDispatchingTimeGangguanMoM(
+              bulan: $bulan
+              tahun: $tahun
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_posko
+              nama_posko
+              no_laporan
+              pembuat_laporan
+              waktu_lapor
+              waktu_dispatch
+              waktu_response
+              waktu_recovery
+              durasi_dispatch_time
+              durasi_response_time
+              durasi_recovery_time
+              status_akhir
+              is_marking
+              referensi_marking
+              idpel_nometer
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              media
+              jarak_closing
+              dispatch_oleh
+              diselesaikan_oleh
+              penyebab
+              tindakan
+              kode_gangguan
+              jenis_gangguan
+              nilai_rating
+            }
+          }
+        `,
         dispatchingTimeGangguan: gql`
           query monalisaDispatchingTimeGangguan(
             $namaRegional: String