Fix data source in RKeluhan_ALL.vue and add id field in api.graphql.ts
This commit is contained in:
Dede Fuji Abdul
parent
27da05087c
commit
e08bbb9318
@ -429,7 +429,7 @@
|
||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||
<DxDataGrid
|
||||
class="max-h-[calc(100vh-140px)]"
|
||||
:data-source="data"
|
||||
:data-source="dataSub"
|
||||
:show-column-lines="true"
|
||||
:show-row-lines="false"
|
||||
:show-borders="true"
|
||||
@ -470,9 +470,7 @@
|
||||
css-class="custom-table-column"
|
||||
:width="50"
|
||||
alignment="center"
|
||||
:calculateCellValue="
|
||||
(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
|
||||
"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
|
||||
@ -1,43 +1,178 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid 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="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
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="onSelectionChanged"
|
||||
@exporting="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
|
||||
:caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
|
||||
:caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="mom_bulan_kemarin"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(currentMonth)} ${lastYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="mom_bulan_ini"
|
||||
data-type="number"
|
||||
:caption="`${getMonthName(currentMonth)} ${currentYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_mom"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
|
||||
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
|
||||
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
|
||||
<DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
|
||||
css-class="custom-table-column" cell-template="percent" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="yoy_tahun_kemarin"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="yoy_tahun_ini"
|
||||
data-type="number"
|
||||
:caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="70"
|
||||
alignment="center"
|
||||
data-field="persen_yoy"
|
||||
data-type="number"
|
||||
caption="%"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<template #percent="{ data }">
|
||||
{{ data.text }}%
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="!text-left">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<DxSummary>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="nama_ulp"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="mom_bulan_kemarin"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="mom_bulan_ini"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="persen_mom"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="yoy_tahun_kemarin"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
|
||||
<DxTotalItem
|
||||
column="yoy_tahun_ini"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="persen_yoy"
|
||||
summary-type="avg"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
@ -45,7 +180,7 @@
|
||||
<script setup lang="ts">
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
@ -55,7 +190,9 @@ import {
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxSelection,
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -65,6 +202,7 @@ import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { getMonthName } from '@/utils/texts'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
@ -77,14 +215,17 @@ const data = ref<any[]>([])
|
||||
const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, {
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
})
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
|
||||
{
|
||||
bulan: 10,
|
||||
tahun: 2023,
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||
currentMonth.value = bulan.id
|
||||
@ -145,4 +286,250 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = [
|
||||
{
|
||||
id: 0,
|
||||
nama_regional: null,
|
||||
id_uid: 0,
|
||||
nama_uid: '',
|
||||
id_up3: 0,
|
||||
nama_up3: '',
|
||||
id_ulp: 0,
|
||||
nama_ulp: '',
|
||||
mom_bulan_ini: 11020739,
|
||||
mom_bulan_kemarin: 6831980,
|
||||
persen_mom: -61.31105477475051,
|
||||
yoy_tahun_ini: 139773892,
|
||||
yoy_tahun_kemarin: 168209007,
|
||||
persen_yoy: 16.904632817908496
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 120,
|
||||
nama_uid: 'WILAYAH SUMATERA UTARA',
|
||||
id_up3: 12100,
|
||||
nama_up3: 'UP3 PEMATANG SIANTAR',
|
||||
id_ulp: 12102,
|
||||
nama_ulp: 'ULP LIMA PULUH',
|
||||
mom_bulan_ini: 14813,
|
||||
mom_bulan_kemarin: 47696,
|
||||
persen_mom: 68.94288829251929,
|
||||
yoy_tahun_ini: 354676,
|
||||
yoy_tahun_kemarin: 624303,
|
||||
persen_yoy: 43.18848379713056
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 41,
|
||||
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
|
||||
id_up3: 412,
|
||||
nama_up3: 'UP3 TERNATE',
|
||||
id_ulp: 41230,
|
||||
nama_ulp: 'ULP BACAN',
|
||||
mom_bulan_ini: 462651,
|
||||
mom_bulan_kemarin: 6730,
|
||||
persen_mom: -6774.45765230312,
|
||||
yoy_tahun_ini: 1643180,
|
||||
yoy_tahun_kemarin: 492691,
|
||||
persen_yoy: -233.51126771140534
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 101,
|
||||
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
|
||||
id_up3: 52150,
|
||||
nama_up3: 'UP3 MAGELANG',
|
||||
id_ulp: 52156,
|
||||
nama_ulp: 'ULP PARAKAN',
|
||||
mom_bulan_ini: 855320,
|
||||
mom_bulan_kemarin: 837741,
|
||||
persen_mom: -2.0983812419351566,
|
||||
yoy_tahun_ini: 8072389,
|
||||
yoy_tahun_kemarin: 11055796,
|
||||
persen_yoy: 26.985004064836215
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 31,
|
||||
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
|
||||
id_up3: 31500,
|
||||
nama_up3: 'UP3 TOLITOLI',
|
||||
id_ulp: 31530,
|
||||
nama_ulp: 'ULP BANGKIR',
|
||||
mom_bulan_ini: 56259,
|
||||
mom_bulan_kemarin: 76807,
|
||||
persen_mom: 26.752769929824105,
|
||||
yoy_tahun_ini: 1098120,
|
||||
yoy_tahun_kemarin: 2481724,
|
||||
persen_yoy: 55.751727428191046
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 154,
|
||||
nama_up3: 'UP3 SITUBONDO',
|
||||
id_ulp: 51654,
|
||||
nama_ulp: 'ULP WONOSARI',
|
||||
mom_bulan_ini: 478439,
|
||||
mom_bulan_kemarin: 1078502,
|
||||
persen_mom: 55.6385616345635,
|
||||
yoy_tahun_ini: 6845897,
|
||||
yoy_tahun_kemarin: 7566389,
|
||||
persen_yoy: 9.522270134406254
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 110,
|
||||
nama_uid: 'WILAYAH ACEH',
|
||||
id_up3: 116,
|
||||
nama_up3: 'UP3 SIGLI',
|
||||
id_ulp: 11662,
|
||||
nama_ulp: 'ULP MEUREUDU',
|
||||
mom_bulan_ini: 559072,
|
||||
mom_bulan_kemarin: 182563,
|
||||
persen_mom: -206.23510788056728,
|
||||
yoy_tahun_ini: 7747710,
|
||||
yoy_tahun_kemarin: 7916066,
|
||||
persen_yoy: 2.12676347064312
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 287,
|
||||
nama_uid: 'DISTRIBUSI BALI',
|
||||
id_up3: 329,
|
||||
nama_up3: 'UP3 BALI UTARA',
|
||||
id_ulp: 55340,
|
||||
nama_ulp: 'ULP GILIMANUK',
|
||||
mom_bulan_ini: 643731,
|
||||
mom_bulan_kemarin: 578381,
|
||||
persen_mom: -11.298780561602127,
|
||||
yoy_tahun_ini: 7155021,
|
||||
yoy_tahun_kemarin: 5869321,
|
||||
persen_yoy: -21.905429946666743
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13300,
|
||||
nama_up3: 'UP3 SOLOK',
|
||||
id_ulp: 13334,
|
||||
nama_ulp: 'ULP SILUNGKANG',
|
||||
mom_bulan_ini: 289082,
|
||||
mom_bulan_kemarin: 416662,
|
||||
persen_mom: 30.61954293888092,
|
||||
yoy_tahun_ini: 1509396,
|
||||
yoy_tahun_kemarin: 3844624,
|
||||
persen_yoy: 60.740087977393884
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 221,
|
||||
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
|
||||
id_up3: 2220,
|
||||
nama_up3: 'UP3 BARABAI',
|
||||
id_ulp: 22230,
|
||||
nama_ulp: 'ULP AMUNTAI',
|
||||
mom_bulan_ini: 183310,
|
||||
mom_bulan_kemarin: 356299,
|
||||
persen_mom: 48.55163780981703,
|
||||
yoy_tahun_ini: 2039104,
|
||||
yoy_tahun_kemarin: 5170462,
|
||||
persen_yoy: 60.56244103524985
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 31,
|
||||
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
|
||||
id_up3: 31700,
|
||||
nama_up3: 'UP3 KOTAMOBAGU',
|
||||
id_ulp: 31730,
|
||||
nama_ulp: 'ULP MODAYAG',
|
||||
mom_bulan_ini: 86982,
|
||||
mom_bulan_kemarin: 39871,
|
||||
persen_mom: -118.15856136038725,
|
||||
yoy_tahun_ini: 1111887,
|
||||
yoy_tahun_kemarin: 2440181,
|
||||
persen_yoy: 54.4342407386993
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 427,
|
||||
nama_uid: 'DISTRIBUSI JAWA BARAT',
|
||||
id_up3: 546,
|
||||
nama_up3: 'UP3 TASIKMALAYA',
|
||||
id_ulp: 53231,
|
||||
nama_ulp: 'ULP CIAMIS',
|
||||
mom_bulan_ini: 1042643,
|
||||
mom_bulan_kemarin: 2168988,
|
||||
persen_mom: 51.92951736016981,
|
||||
yoy_tahun_ini: 8579030,
|
||||
yoy_tahun_kemarin: 16227325,
|
||||
persen_yoy: 47.13219831364689
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 157,
|
||||
nama_up3: 'UP3 SURABAYA UTARA',
|
||||
id_ulp: 51101,
|
||||
nama_ulp: 'ULP INDRAPURA',
|
||||
mom_bulan_ini: 469350,
|
||||
mom_bulan_kemarin: 575194,
|
||||
persen_mom: 18.401443686825665,
|
||||
yoy_tahun_ini: 4905051,
|
||||
yoy_tahun_kemarin: 4976204,
|
||||
persen_yoy: 1.4298650135725948
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 41,
|
||||
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
|
||||
id_up3: 414,
|
||||
nama_up3: 'UP3 MASOHI',
|
||||
id_ulp: 41430,
|
||||
nama_ulp: 'ULP MASOHI',
|
||||
mom_bulan_ini: 163662,
|
||||
mom_bulan_kemarin: 83017,
|
||||
persen_mom: -97.14275389378079,
|
||||
yoy_tahun_ini: 1842074,
|
||||
yoy_tahun_kemarin: 686794,
|
||||
persen_yoy: -168.21346721142
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13100,
|
||||
nama_up3: 'UP3 PADANG',
|
||||
id_ulp: 13105,
|
||||
nama_ulp: 'ULP LUBUK ALUNG',
|
||||
mom_bulan_ini: 549380,
|
||||
mom_bulan_kemarin: 802333,
|
||||
persen_mom: 31.527183850097156,
|
||||
yoy_tahun_ini: 5168384,
|
||||
yoy_tahun_kemarin: 8611936,
|
||||
persen_yoy: 39.98580574681465
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,48 +1,442 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||
<Type2 @update:filters="(value) => filters = value" />
|
||||
<Type2 @update:filters="(value) => (filters = value)" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid 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="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxDataGrid
|
||||
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"
|
||||
:word-wrap-enabled="true"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxLoadPanel
|
||||
:position="position"
|
||||
:show-indicator="showIndicator"
|
||||
:show-pane="showPane"
|
||||
:shading="shading"
|
||||
v-if="loading"
|
||||
v-model:visible="loading"
|
||||
:enabled="true"
|
||||
/>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxExport
|
||||
:enabled="true"
|
||||
:formats="['pdf', 'xlsx', 'document']"
|
||||
:allow-export-selected-data="false"
|
||||
/>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
alignment="center"
|
||||
data-field="nama_ulp"
|
||||
caption="Nama Unit"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="jumlah_informasi" data-type="number" caption="Informasi"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_gangguan"
|
||||
data-type="number"
|
||||
caption="Gangguan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="jumlah_informasi"
|
||||
data-type="number"
|
||||
caption="Informasi"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field="total"
|
||||
data-type="number"
|
||||
caption="Total"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
</DxColumn>
|
||||
<template #formatNumber="{ data }">
|
||||
<p class="text-right cursor-pointer" @click="showDialog()">
|
||||
{{
|
||||
isNumber(data.text)
|
||||
? data.column.caption == '%'
|
||||
? formatPercentage(data.text)
|
||||
: formatNumber(data.text)
|
||||
: data.text
|
||||
}}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<template #formatText="{ data }">
|
||||
<p class="!text-left cursor-pointer" @click="showDialog()">
|
||||
{{ data.text }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<DxSummary>
|
||||
<DxTotalItem
|
||||
summary-type="sum"
|
||||
display-format="Total"
|
||||
show-in-column="nama_ulp"
|
||||
css-class="text-white !text-left"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="jumlah_gangguan"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="jumlah_informasi"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
<DxTotalItem
|
||||
column="total"
|
||||
summary-type="sum"
|
||||
display-format="{0}"
|
||||
css-class="text-white !text-right"
|
||||
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
|
||||
/>
|
||||
</DxSummary>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
|
||||
<DetailDialog
|
||||
:open="showDetail"
|
||||
title="Detail Gangguan Belum Selesai"
|
||||
@on-close="closeDialog"
|
||||
: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
|
||||
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="onExporting"
|
||||
:allow-column-resizing="true"
|
||||
column-resizing-mode="widget"
|
||||
>
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :page-size="5" :enabled="true" />
|
||||
<DxPager
|
||||
:visible="true"
|
||||
:allowed-page-sizes="[5, 10, 20]"
|
||||
display-mode="full"
|
||||
:show-page-size-selector="true"
|
||||
:show-info="true"
|
||||
:show-navigation-buttons="true"
|
||||
/>
|
||||
<DxLoadPanel
|
||||
: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"
|
||||
:calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
||||
data-type="number"
|
||||
caption="No"
|
||||
cell-template="formatNumber"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="No Laporan"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="UID/UIW"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="UP3"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="ULP"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="ID Pelanggan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Nama Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Alamat Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="No Telp Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Keterangan Pelapor"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Penyebab"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Kode Gangguan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="200"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Jenis Gangguan"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatText"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Durasi Response Time"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Durasi Recoery Time:"
|
||||
:allow-resizing="false"
|
||||
css-class="custom-table-column"
|
||||
cell-template="formatTime"
|
||||
/>
|
||||
<DxColumn
|
||||
:width="150"
|
||||
alignment="center"
|
||||
data-field=""
|
||||
caption="Tgl Lapor"
|
||||
: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">No Laporan:</h3>
|
||||
<InputText :readonly="true" value="" 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">UID/UIW:</h3>
|
||||
<InputText :readonly="true" value="" 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">UP3:</h3>
|
||||
<InputText :readonly="true" value="" 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">ULP:</h3>
|
||||
<InputText :readonly="true" value="" 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">ID Pelanggan:</h3>
|
||||
<InputText :readonly="true" value="" 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="" 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" value="" 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="" 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="" 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="" 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="" 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="" 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="" 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 Recoery Time:</h3>
|
||||
<InputText :readonly="true" value="" 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 Lapor:</h3>
|
||||
<InputText :readonly="true" value="" 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 Selesai:</h3>
|
||||
<InputText :readonly="true" value="" class-name="flex-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DetailDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import Type2 from '@/components/Form/FiltersType/Type2.vue'
|
||||
import { ref } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import {
|
||||
DxColumn,
|
||||
DxColumnFixing,
|
||||
DxExport,
|
||||
DxLoadPanel,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxScrolling,
|
||||
DxSearchPanel,
|
||||
DxSelection
|
||||
DxSelection,
|
||||
DxSummary,
|
||||
DxTotalItem
|
||||
} from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
@ -51,6 +445,10 @@ import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import { queries } from '@/utils/api/api.graphql'
|
||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||
import InputText from '@/components/InputText.vue'
|
||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||
|
||||
const currentYear = ref(new Date().getFullYear())
|
||||
const currentMonth = ref(new Date().getMonth())
|
||||
@ -60,16 +458,31 @@ const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
const dataDetail = ref<any>()
|
||||
const dataSub = ref<any[]>([])
|
||||
const dataSelected = ref<any>()
|
||||
const dataSubSelected = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, {
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
})
|
||||
const loadingSubData = ref(false)
|
||||
|
||||
const showDialog = () => {
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
queries.monalisa.gangguan.rekap.gangguanBelumSelesai,
|
||||
{
|
||||
regional: '',
|
||||
idUlp: 0,
|
||||
idUid: 0,
|
||||
idUp3: 0,
|
||||
bulan: 10,
|
||||
tahun: 2023
|
||||
}
|
||||
)
|
||||
const filterData = (params: any) => {
|
||||
const { regional, ulp, uid, up3, bulan, tahun } = params
|
||||
currentMonth.value = bulan.id
|
||||
@ -124,10 +537,151 @@ const onExporting = (e: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataSelected.value = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
dataSubSelected.value = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
onMounted(() => {
|
||||
if (import.meta.env.DEV) {
|
||||
data.value = [
|
||||
{
|
||||
id: 0,
|
||||
nama_regional: null,
|
||||
id_uid: 0,
|
||||
nama_uid: '',
|
||||
id_up3: 0,
|
||||
nama_up3: '',
|
||||
id_ulp: 0,
|
||||
nama_ulp: '',
|
||||
jumlah_gangguan: 19286,
|
||||
jumlah_informasi: 0,
|
||||
total: 19286
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 120,
|
||||
nama_uid: 'WILAYAH SUMATERA UTARA',
|
||||
id_up3: 12100,
|
||||
nama_up3: 'UP3 PEMATANG SIANTAR',
|
||||
id_ulp: 12102,
|
||||
nama_ulp: 'ULP LIMA PULUH',
|
||||
jumlah_gangguan: 41,
|
||||
jumlah_informasi: 0,
|
||||
total: 41
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 41,
|
||||
nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
|
||||
id_up3: 412,
|
||||
nama_up3: 'UP3 TERNATE',
|
||||
id_ulp: 41230,
|
||||
nama_ulp: 'ULP BACAN',
|
||||
jumlah_gangguan: 511,
|
||||
jumlah_informasi: 0,
|
||||
total: 511
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 101,
|
||||
nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
|
||||
id_up3: 52150,
|
||||
nama_up3: 'UP3 MAGELANG',
|
||||
id_ulp: 52156,
|
||||
nama_ulp: 'ULP PARAKAN',
|
||||
jumlah_gangguan: 1072,
|
||||
jumlah_informasi: 0,
|
||||
total: 1072
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
nama_regional: 'REGIONAL SULMAPANA',
|
||||
id_uid: 31,
|
||||
nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
|
||||
id_up3: 31500,
|
||||
nama_up3: 'UP3 TOLITOLI',
|
||||
id_ulp: 31530,
|
||||
nama_ulp: 'ULP BANGKIR',
|
||||
jumlah_gangguan: 70,
|
||||
jumlah_informasi: 0,
|
||||
total: 70
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 103,
|
||||
nama_uid: 'DISTRIBUSI JAWA TIMUR',
|
||||
id_up3: 154,
|
||||
nama_up3: 'UP3 SITUBONDO',
|
||||
id_ulp: 51654,
|
||||
nama_ulp: 'ULP WONOSARI',
|
||||
jumlah_gangguan: 1401,
|
||||
jumlah_informasi: 0,
|
||||
total: 1401
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 110,
|
||||
nama_uid: 'WILAYAH ACEH',
|
||||
id_up3: 116,
|
||||
nama_up3: 'UP3 SIGLI',
|
||||
id_ulp: 11662,
|
||||
nama_ulp: 'ULP MEUREUDU',
|
||||
jumlah_gangguan: 608,
|
||||
jumlah_informasi: 0,
|
||||
total: 608
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
nama_regional: 'REGIONAL JMB',
|
||||
id_uid: 287,
|
||||
nama_uid: 'DISTRIBUSI BALI',
|
||||
id_up3: 329,
|
||||
nama_up3: 'UP3 BALI UTARA',
|
||||
id_ulp: 55340,
|
||||
nama_ulp: 'ULP GILIMANUK',
|
||||
jumlah_gangguan: 858,
|
||||
jumlah_informasi: 0,
|
||||
total: 858
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 131,
|
||||
nama_uid: 'WILAYAH SUMATERA BARAT',
|
||||
id_up3: 13300,
|
||||
nama_up3: 'UP3 SOLOK',
|
||||
id_ulp: 13334,
|
||||
nama_ulp: 'ULP SILUNGKANG',
|
||||
jumlah_gangguan: 305,
|
||||
jumlah_informasi: 0,
|
||||
total: 305
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
nama_regional: 'REGIONAL SUMKAL',
|
||||
id_uid: 221,
|
||||
nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
|
||||
id_up3: 2220,
|
||||
nama_up3: 'UP3 BARABAI',
|
||||
id_ulp: 22230,
|
||||
nama_ulp: 'ULP AMUNTAI',
|
||||
jumlah_gangguan: 323,
|
||||
jumlah_informasi: 0,
|
||||
total: 323
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1467,6 +1467,7 @@ export const queries = {
|
||||
bulan: $bulan
|
||||
tahun: $tahun
|
||||
) {
|
||||
id
|
||||
nama_regional
|
||||
id_uid
|
||||
nama_uid
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user