Add anomali queries for gangguan unit

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

@@ -10,7 +10,7 @@
     :show-borders="true"
     :row-alternation-enabled="true"
     :hover-state-enabled="true"
-    @selection-changed="onSelectionChanged"
+    @selection-changed="onDataSelectionChanged"
     @exporting="onExporting"
     :allow-column-resizing="true"
     column-resizing-mode="widget"
@@ -29,18 +29,20 @@
 
     <DxColumn
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="wo_total"
         data-type="number"
         caption="a"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -51,10 +53,11 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="total_anomali_marking"
         data-type="number"
         caption="b"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -65,12 +68,43 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="persen_anomali_marking"
         data-type="number"
         caption="c=b/a"
         css-class="custom-table-column"
+        cell-template="formatPercentage"
       />
     </DxColumn>
+
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer" @click="showData()">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer" @click="showData()">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer" @click="showData()">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }" @click="showData()">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
   </DxDataGrid>
 </template>
 
@@ -90,11 +124,23 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const props = defineProps({
   data: Array as () => any[]
 })
 const data = computed(() => props.data)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>({})
+const dataSubSelected = ref<any>({})
+const showDetail = ref(false)
+const showData = () => {
+  showDetail.value = true
+}
+const closeDetail = () => {
+  showDetail.value = false
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -125,8 +171,8 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  const dataSelected = selectedRowsData[0]
   console.log(data)
 }
 </script>