From a1b88c8939a136e528daf1ae0c9f7933c4ee0ea7 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 1 Apr 2024 16:20:07 +0700
Subject: [PATCH] -

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 417 ++++++------------
 1 file changed, 128 insertions(+), 289 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index aadc4a7..95cbad5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -5,33 +5,15 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      @cell-click="onCellClicked"
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-    >
+    <DxDataGrid @cell-click="onCellClicked" ref="dataGridRef" :allow-column-reordering="true"
+      class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget">
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <!-- <DxColumn
@@ -116,12 +98,13 @@
       </DxColumn>
 
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" summary-type="sum"
-          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" summary-type="sum"
-          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total" column="total"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_selesai" column="total_selesai"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_selesai" column="persen_selesai"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
         <!-- <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
@@ -130,10 +113,11 @@
           summary-type="custom"
           css-class="!text-right"
         /> -->
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" summary-type="sum"
-          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_inproses" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="total_inproses" column="total_inproses"
+          summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" name="persen_inproses"
+          column="persen_inproses" summary-type="custom" css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
         <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
           summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
 
@@ -241,21 +225,10 @@
   <DetailDialog :open="dialogDetail" title="Detail Gangguan All" @on-close="closedialogDetail" :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
-          :allow-column-reordering="true"
-          class="max-h-[calc(100vh-140px)]"
-          :data-source="dataSub"
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="onExportingDetail"
-          :allow-column-resizing="true"
-          column-resizing-mode="widget"
-        >
+        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
+          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
+          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
+          @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
           <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
@@ -265,228 +238,57 @@
           <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"
-            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
-            data-type="number"
-            caption="No"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_posko"
-            caption="Posko"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_laporan"
-            caption="No Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_lapor"
-            caption="Tgl/Jam Lapor"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_response"
-            caption="Tgl/Jam Datang"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="waktu_recovery"
-            caption="Tgl/Jam Nyala"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_response_time"
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_recovery_time"
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Penugasan Regu"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Perjalanan Regu"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jarak_closing"
-            caption="Jarak Closing (m)"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="dispatch_oleh"
-            caption="Dispatch Oleh"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="idpel_nometer"
-            caption="IDPEL/NO METER"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="nama_pelapor"
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="alamat_pelapor"
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="no_telp_pelapor"
-            caption="No Telp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field="keterangan_pelapor"
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="pembuat_laporan"
-            caption="Sumber Lapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="diselesaikan_oleh"
-            caption="Diselesaikan Oleh"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking"
-            caption="Referensi Marking"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="kode_gangguan"
-            caption="Kode Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jenis_gangguan"
-            caption="Jenis Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="penyebab"
-            caption="Penyebab"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tindakan"
-            caption="Tindakan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
+          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl/Jam Lapor"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl/Jam Datang"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl/Jam Nyala"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan Regu"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
+          <DxColumn :width="150" alignment="center" data-field="jarak_closing" caption="Jarak Closing (m)"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="dispatch_oleh" caption="Dispatch Oleh"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Sumber Lapor"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="diselesaikan_oleh" caption="Diselesaikan Oleh"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="kode_gangguan" caption="Kode Gangguan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="jenis_gangguan" caption="Jenis Gangguan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -662,8 +464,9 @@ import {
   DxSummary,
   DxGroupItem,
   DxGrouping,
+
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
@@ -681,7 +484,9 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 import { getDataRowGroup } from '@/utils/helper'
-
+const calculateGroupValue = (e: any) => {
+  console.log(e)
+}
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -765,22 +570,57 @@ const setAgreementDialog = (column: string) => {
     agreeToShowDialog.value = false
   }
 }
-
+let total_selesai = 0;
+let total_inproses = 0;
+let total = 0;
 const calculateCustomSummary = (options: any) => {
-  if (options.name == 'persenSelesai') {
-    console.log(options.component.persen_selesai)
 
-    switch (options.summaryProcess) {
-      case 'start':
-        // Initializing "totalValue" here
-        options.totalValue = 1
-        break
-      case 'calculate':
-        // Modifying "totalValue" here
-        break
-      case 'finalize':
-        // Assigning the final value to "totalValue" here
-        break
+  if (options.name === 'total') {
+    if (options.summaryProcess === 'calculate') {
+      total += options.value;
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total
+
+    }
+  }
+  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 === 'total_selesai') {
+    if (options.summaryProcess === 'calculate') {
+      total_selesai += options.value;
+
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = total_selesai
+    }
+
+  }
+
+  if (options.name === 'persen_selesai') {
+    if (options.summaryProcess === 'start') {
+      total_selesai = 0;
+      total = 0;
+    } else if (options.summaryProcess === 'calculate') {
+
+    } else if (options.summaryProcess === 'finalize') {
+
+      options.totalValue = (total_selesai / total) * 100;
+    }
+  }
+  if (options.name === 'persen_inproses') {
+    if (options.summaryProcess === 'start') {
+      total_inproses = 0;
+      total = 0;
+    } else if (options.summaryProcess === 'calculate') {
+
+    } else if (options.summaryProcess === 'finalize') {
+
+      options.totalValue = (total_inproses / total) * 100;
     }
   }
 }
@@ -1176,4 +1016,3 @@ onMounted(() => {
   }
 })
 </script>
-@/utils/helper