Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

.env.development

@@ -3,8 +3,5 @@ VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
 # VITE_APP_GRAPHQL_ENDPOINT=http://10.8.0.13:32169/graphql
-# VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
 VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
-
-# VITE_APP_GRAPHQL_ENDPOINT=http://192.168.137.46:32169/graphql
 VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue

@@ -10,7 +10,7 @@
     />
   </Filters>
 
-  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" />
+  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
   <Anomali_LAPPGU_LPP :data="data" />
 </template>
 

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue

@@ -151,7 +151,7 @@
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberPLNMobileMarking"
           />
           <DxColumn
             :width="150"
@@ -160,7 +160,7 @@
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberPLNMobileNonMarking"
           />
         </DxColumn>
       </DxColumn>
@@ -173,7 +173,7 @@
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberCCMarking"
           />
           <DxColumn
             :width="150"
@@ -182,7 +182,7 @@
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberCCNonMarking"
           />
         </DxColumn>
       </DxColumn>
@@ -195,7 +195,7 @@
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberTotalMarking"
           />
           <DxColumn
             :width="150"
@@ -204,7 +204,7 @@
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberTotalNonMarking"
           />
         </DxColumn>
       </DxColumn>
@@ -283,8 +283,80 @@
       </DxColumn>
     </DxColumn>
 
+    <template #formatNumberPLNMobileMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN MOBILE', 1)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberPLNMobileNonMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN MOBILE', 2)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCCMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('CC123', 1)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCCNonMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('CC123', 2)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalNonMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer">
+      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -296,19 +368,19 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer">
+      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer">
+      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right">
+      <p class="!text-right" @click="setParameterRequest(null, null)">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -452,6 +524,492 @@
       />
     </DxSummary>
   </DxDataGrid>
+
+  <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"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :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"
+            :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">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
+          <InputText
+            :readonly="true"
+            class-name="flex-1"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_dispatch_time)
+                ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jarak Closing (m):</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.jarak_closing" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_oleh" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.pembuat_laporan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.diselesaikan_oleh"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.jenis_gangguan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -477,6 +1035,9 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import InputText from '@/components/InputText.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const loading = ref(computed(() => props.loading))
@@ -484,19 +1045,112 @@ const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
+  filters: Object as () => any,
   loading: {
     type: Boolean,
     default: false
   }
 })
+const filters = ref<any>(props.filters)
 const showDialog = ref(false)
 const data = computed(() => props.data)
-const dataSelected = ref()
+const dataSub = ref<any[]>([])
-const dataSub = ref([])
+const dataSelected = ref<any>(null)
-const dataSubSelected = ref()
+const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
-const showDetail = () => (dialogDetail.value = true)
+const closedialogDetail = () => (dialogDetail.value = false)
-const closeDialog = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const mediaSelected = ref<any>(null)
+const markingSelected = ref<any>(null)
+
+const setParameterRequest = (media: any, marking: any) => {
+  mediaSelected.value = media
+  markingSelected.value = marking
+
+  if (media != null && marking != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  dataSub.value = []
+  dataSubSelected.value = null
+}
+
+const getDetail = async () => {
+  resetData()
+  const { ulp, uid, up3, jenisLaporan } = filters.value
+  console.table('LAPPGU', jenisLaporan)
+
+  const dateValue = filters.value.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: '',
+    media: mediaSelected.value,
+    isMarking: markingSelected.value
+  }
+
+  loadingSubData.value = true
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.unitBerulangDetail
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.unitRatingNegatifDetail
+        : queries.anomali.gangguan.unitSkipStepDetail,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
+        } else {
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
+        }
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
+}
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  try {
+    dataGridRef.value?.instance?.clearSelection()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -526,10 +1180,17 @@ const onExporting = (e: any) => {
   }
 }
 
+const onExportingDetail = (e: any) => {}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
+}
+
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 </script>

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue

@@ -145,7 +145,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_anomali"
+          data-field="anomali_pln_mobile"
           data-type="number"
           caption="f"
           css-class="custom-table-column"
@@ -207,13 +207,10 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_total"
+          data-field="total_persen_anomali"
           data-type="number"
           caption="k=i+j"
           css-class="custom-table-column"
-          :calculate-display-value="
-            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
-          "
           cell-template="formatPercentage"
         />
       </DxColumn>
@@ -293,7 +290,7 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="anomali_pln_mobile_marking"
+        column="anomali_pln_mobile"
         summary-type="sum"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -301,7 +298,7 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="anomali_cc123_marking"
+        column="anomali_cc123"
         summary-type="sum"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
@@ -309,19 +306,12 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="total_anomali_marking"
+        column="total_anomali"
         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_anomali_cc123_marking"
-        summary-type="avg"
-        css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(e.value)"
-      />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
@@ -333,29 +323,17 @@
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
-        column="persen_anomali_total"
+        column="persen_anomali_cc123"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="total_persen_anomali"
         summary-type="avg"
         css-class="!text-right"
-        :calculate-custom-summary="
-          (options: any) => {
-            if (options.summaryProcess === 'start') {
-              options.totalValue = 0
-              options.count = 0
-            }
-            if (options.summaryProcess === 'calculate') {
-              if (options.value) {
-                options.totalValue += options.value
-                options.count++
-              }
-            }
-            if (options.summaryProcess === 'finalize') {
-              return options.totalValue / options.count
-            }
-          }
-        "
-        :calculate-display-value="
-          (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
-        "
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
     </DxSummary>

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

@@ -1081,7 +1081,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
-import { getDataRowGroup } from '@/utils/data'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1561,3 +1561,4 @@ onMounted(() => {
   }
 })
 </script>
+@/utils/helper

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

@@ -1134,7 +1134,7 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 import { getMonthNumber } from '@/utils/texts'
-import { getDataRowGroup } from '@/utils/data'
+import { getDataRowGroup } from '@/utils/helper'
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -1659,3 +1659,4 @@ onMounted(() => {
   }
 })
 </script>
+@/utils/helper

src/utils/api/api.graphql.ts

@@ -3001,6 +3001,61 @@ export const queries = {
   },
   anomali: {
     gangguan: {
+      unitBerulangDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       unitBerulang: gql`
         query anomaliPenangananPengaduanGangguanUnitBerulang(
           $dateFrom: Date!
@@ -3044,6 +3099,61 @@ export const queries = {
           }
         }
       `,
+      unitRatingNegatifDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       unitRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanUnitRatingNegatif(
           $dateFrom: Date!
@@ -3087,6 +3197,61 @@ export const queries = {
           }
         }
       `,
+      unitSkipStepDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       unitSkipStep: gql`
         query anomaliPenangananPengaduanGangguanUnitSkipStep(
           $dateFrom: Date!
@@ -3130,6 +3295,57 @@ export const queries = {
           }
         }
       `,
+      petugasBerulangDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       petugasBerulang: gql`
         query anomaliPenangananPengaduanGangguanPetugasBerulang(
           $dateFrom: Date!
@@ -3169,6 +3385,61 @@ export const queries = {
           }
         }
       `,
+      petugasRatingNegatifDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       petugasRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
           $dateFrom: Date!
@@ -3208,6 +3479,61 @@ export const queries = {
           }
         }
       `,
+      petugasSkipStepDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_response_time
+            durasi_recovery_time
+            durasi_dispatch_time
+            durasi_perjalanan
+            distance
+            dispatch_by
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            diselesaikan_oleh
+            status_akhir
+            kode_gangguan
+            jenis_gangguan
+            penyebab
+            tindakan
+          }
+        }
+      `,
       petugasSkipStep: gql`
         query anomaliPenangananPengaduanGangguanPetugasSkipStep(
           $dateFrom: Date!
@@ -3249,6 +3575,51 @@ export const queries = {
       `
     },
     keluhan: {
+      unitBerulangDetail: gql`
+        query detailAnomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+        ) {
+          detailAnomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_recovery_time
+            durasi_response_time
+            status_akhir
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            uraian
+            respon_pelanggan
+          }
+        }
+      `,
       unitBerulang: gql`
         query anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
           $dateFrom: Date!
@@ -3283,6 +3654,52 @@ export const queries = {
             total_anomali
             persen_anomali_pln_mobile
             persen_anomali_cc123
+            total_persen_anomali
+          }
+        }
+      `,
+      unitSkipStepDetail: gql`
+        query detailAnomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+        ) {
+          detailAnomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_recovery_time
+            durasi_response_time
+            status_akhir
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            uraian
+            respon_pelanggan
           }
         }
       `,
@@ -3320,6 +3737,52 @@ export const queries = {
             total_anomali
             persen_anomali_pln_mobile
             persen_anomali_cc123
+            total_persen_anomali
+          }
+        }
+      `,
+      unitRatingNegatifDetail: gql`
+        query detailAnomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+        ) {
+          detailAnomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            no_laporan
+            referensi_marking
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_recovery_time
+            durasi_response_time
+            status_akhir
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            uraian
+            respon_pelanggan
           }
         }
       `,
@@ -3357,6 +3820,7 @@ export const queries = {
             total_anomali
             persen_anomali_pln_mobile
             persen_anomali_cc123
+            total_persen_anomali
           }
         }
       `

src/utils/helper.ts

@@ -0,0 +1,39 @@
+export const getDataRowGroup = (data: any): any => {
+  if (Array.isArray(data)) {
+    if (data[0].items) {
+      if (Array.isArray(data[0].items)) {
+        return getDataRowGroup(data[0].items[0])
+      } else {
+        return getDataRowGroup(data[0].items)
+      }
+    } else if (data[0].collapsedItems) {
+      if (Array.isArray(data[0].collapsedItems)) {
+        return getDataRowGroup(data[0].collapsedItems[0])
+      } else {
+        return getDataRowGroup(data[0].collapsedItems)
+      }
+    } else {
+      if (Array.isArray(data[0])) {
+        return getDataRowGroup(data[0])
+      } else {
+        return getDataRowGroup(data)
+      }
+    }
+  } else {
+    if (data.items) {
+      if (Array.isArray(data.items)) {
+        return getDataRowGroup(data.items[0])
+      } else {
+        return getDataRowGroup(data.items)
+      }
+    } else if (data.collapsedItems) {
+      if (Array.isArray(data.collapsedItems)) {
+        return getDataRowGroup(data.collapsedItems[0])
+      } else {
+        return getDataRowGroup(data.collapsedItems)
+      }
+    } else {
+      return data
+    }
+  }
+}