Update queries for anomali gangguan

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

@@ -10,8 +10,7 @@
     :show-borders="true"
     :row-alternation-enabled="true"
     :hover-state-enabled="true"
-    @selection-changed="onSelectionChanged"
+    @selection-changed="onDataSelectionChanged"
-    :column-width="100"
     @exporting="onExporting"
     :allow-column-resizing="true"
     column-resizing-mode="widget"
@@ -29,18 +28,19 @@
     <DxColumnFixing :enabled="true" />
 
     <DxColumn
-      :width="170"
       alignment="center"
-      data-field="nama_posko"
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn
       :width="170"
       alignment="center"
-      data-field="nama_petugas"
+      data-field=""
       caption="Nama Petugas"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn
@@ -51,10 +51,11 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_wo"
+          data-field=""
           data-type="number"
           caption="a"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -67,30 +68,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+          data-field="anomali_pln_mobile_marking"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_penyelesaian_petugas_anomali_cc_123"
+          data-field="anomali_cc123_marking"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_penyelesaian_petugas_anomali"
+          data-field="total_anomali_marking"
           data-type="number"
           caption="d=b+c"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -103,33 +107,66 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+          data-field="persen_anomali_pln_mobile_marking"
           data-type="number"
           caption="e=b/a"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_penyelesaian_petugas_anomali_cc_123"
+          data-field="persen_anomali_cc123_marking"
           data-type="number"
           caption="f=c/a"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_penyelesaian_petugas_anomali"
+          data-field="persen_anomali_marking"
           data-type="number"
           caption="g=e+f"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
     </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>
 
@@ -149,11 +186,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([])
+const dataSelected = ref({})
+const dataSubSelected = ref({})
+const showDetail = ref(false)
+const showData = () => {
+  showDetail.value = true
+}
+const closeDetail = () => {
+  showDetail.value = false
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -184,8 +233,8 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  const dataSelected = selectedRowsData[0]
   console.log(data)
 }
 </script>

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

@@ -9,7 +9,7 @@
     :show-borders="true"
     :row-alternation-enabled="true"
     :hover-state-enabled="true"
-    @selection-changed="onSelectionChanged"
+    @selection-changed="onDataSelectionChanged"
     :column-width="100"
     @exporting="onExporting"
     :allow-column-resizing="true"
@@ -40,9 +40,20 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field="nama_posko"
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
+    />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field="nama_ulp"
+      caption="Nama Unit"
+      css-class="custom-table-column"
+      cell-template="formatText"
+      name="namaUnit"
+      :group-index="0"
     />
     <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
       <DxColumn
@@ -51,6 +62,7 @@
         data-field="total_petugas"
         caption="a"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -59,34 +71,70 @@
       css-class="custom-table-column"
     >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn alignment="center" caption="b" css-class="custom-table-column">
-          :width="150"
+          <DxColumn
-          alignment="center"
+            :width="150"
-          data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+            alignment="center"
-          data-type="number"
+            data-field="anomali_pln_mobile_marking"
-          caption="b"
+            data-type="number"
-          css-class="custom-table-column"
+            caption="Marking"
-        />
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="anomali_pln_mobile_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+        </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn alignment="center" caption="c" css-class="custom-table-column">
-          :width="150"
+          <DxColumn
-          alignment="center"
+            :width="150"
-          data-field="total_penyelesaian_petugas_anomali_cc_123"
+            alignment="center"
-          data-type="number"
+            data-field="anomali_cc123_marking"
-          caption="c"
+            data-type="number"
-          css-class="custom-table-column"
+            caption="Marking"
-        />
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="anomali_cc123_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+        </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn alignment="center" caption="d=b+c" css-class="custom-table-column">
-          :width="150"
+          <DxColumn
-          alignment="center"
+            :width="150"
-          data-field="total_penyelesaian_petugas_anomali"
+            alignment="center"
-          data-type="number"
+            data-field="total_anomali_marking"
-          caption="d=b+c"
+            data-type="number"
-          css-class="custom-table-column"
+            caption="Marking"
-        />
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_anomali_non_marking"
+            data-type="number"
+            caption="Non Marking"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+        </DxColumn>
       </DxColumn>
     </DxColumn>
     <DxColumn
@@ -99,18 +147,20 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking"
+            data-field="persen_anomali_pln_mobile_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
+            cell-template="formatPercentage"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking"
+            data-field="persen_anomali_pln_mobile_non_marking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
+            cell-template="formatPercentage"
           />
         </DxColumn>
       </DxColumn>
@@ -119,18 +169,20 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+            data-field="persen_anomali_cc123_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
+            cell-template="formatPercentage"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking"
+            data-field="persen_anomali_cc123_non_marking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
+            cell-template="formatPercentage"
           />
         </DxColumn>
       </DxColumn>
@@ -139,22 +191,161 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_marking"
+            data-field="persen_anomali_marking"
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
+            cell-template="formatPercentage"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_penyelesaian_petugas_anomali_non_marking"
+            data-field="persen_anomali_non_marking"
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
+            cell-template="formatPercentage"
           />
         </DxColumn>
       </DxColumn>
     </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>
+
+    <DxSummary>
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="total_petugas"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_pln_mobile_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_pln_mobile_non_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_cc123_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_cc123_non_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="total_anomali_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="total_anomali_non_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_pln_mobile_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_pln_mobile_non_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+      />
+      <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(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_cc123_non_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_non_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+      />
+    </DxSummary>
   </DxDataGrid>
 </template>
 
@@ -165,17 +356,21 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -189,6 +384,16 @@ const props = defineProps({
   }
 })
 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 loading = ref(computed(() => props.loading))
 
 const onExporting = (e: any) => {
@@ -220,8 +425,8 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  dataSelected.value = selectedRowsData[0]
   console.log(data)
 }
 </script>

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

@@ -31,7 +31,7 @@ const filterData = (params: any) => {
     jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulang
       : jenisLaporan.name == 'Laporan Rating Negatif'
-        ? queries.anomali.gangguan.ratingNegatif
+        ? queries.anomali.gangguan.unitRatingNegatif
         : queries.anomali.gangguan.unitSkipStep,
     {
       dateFrom: new Date().toISOString().slice(0, 10),

src/utils/api/api.graphql.ts

@@ -2147,7 +2147,7 @@ export const queries = {
           }
         }
       `,
-      ratingNegatif: gql`
+      unitRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanUnitRatingNegatif(
           #$namaRegional: String!
           $idUlp: Int!
@@ -2224,6 +2224,111 @@ export const queries = {
             persen_anomali_non_marking
           }
         }
+      `,
+      petugasBerulang: gql`
+        query anomaliPenangananPengaduanGangguanPetugasBerulang(
+          #$namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliPenangananPengaduanGangguanPetugasBerulang(
+            #namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            total_petugas
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_marking
+            total_anomali_non_marking
+            persen_anomali_pln_mobile_marking
+            persen_anomali_pln_mobile_non_marking
+            persen_anomali_cc123_marking
+            persen_anomali_cc123_non_marking
+            persen_anomali_marking
+            persen_anomali_non_marking
+          }
+        }
+      `,
+      petugasRatingNegatif: gql`
+        query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          #$namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            #namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            total_petugas
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_marking
+            total_anomali_non_marking
+            persen_anomali_pln_mobile_marking
+            persen_anomali_pln_mobile_non_marking
+            persen_anomali_cc123_marking
+            persen_anomali_cc123_non_marking
+            persen_anomali_marking
+            persen_anomali_non_marking
+          }
+        }
+      `,
+      petugasSkipStep: gql`
+        query anomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliPenangananPengaduanGangguanPetugasSkipStep(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            total_petugas
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_marking
+            total_anomali_non_marking
+            persen_anomali_pln_mobile_marking
+            persen_anomali_pln_mobile_non_marking
+            persen_anomali_cc123_marking
+            persen_anomali_cc123_non_marking
+            persen_anomali_marking
+            persen_anomali_non_marking
+          }
+        }
       `
     }
   }