defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor CSS styles and add new GraphQL query

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-08 20:50:41 +07:00
parent aff2b2ae52
commit 8883666b4a
4 changed files with 3010 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/css/style.css
View File

@ -1614,10 +1614,6 @@ body {
height: 2.7rem; height: 2.7rem;
} }
.h-\[56px\] {
height: 56px;
}
.h-\[66px\] { .h-\[66px\] {
height: 66px; height: 66px;
} }
@ -3269,6 +3265,10 @@ body {
text-align: center; text-align: center;
} }
.\!text-center {
text-align: center !important;
}
.\!text-right { .\!text-right {
text-align: right !important; text-align: right !important;
} }
@ -3285,10 +3285,6 @@ body {
vertical-align: top !important; vertical-align: top !important;
} }
.align-top {
vertical-align: top;
}
.align-middle { .align-middle {
vertical-align: middle; vertical-align: middle;
} }
@ -5664,8 +5660,8 @@ body {
width: 100%; width: 100%;
} }
.sm\:max-w-\[90\%\] { .sm\:max-w-full {
max-width: 90%; max-width: 100%;
} }
.sm\:max-w-lg { .sm\:max-w-lg {
@ -5684,10 +5680,6 @@ body {
max-width: 20rem; max-width: 20rem;
} }
.sm\:max-w-full {
max-width: 100%;
}
.sm\:flex-1 { .sm\:flex-1 {
flex: 1 1 0%; flex: 1 1 0%;
} }

288
src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
View File

@ -13,7 +13,7 @@
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="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" /> :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" /> v-model:visible="loadingData" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
@ -21,6 +21,10 @@
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit" <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
css-class="custom-table-column" cell-template="cellLeft" name="namaUnit" :group-index="0" />
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" /> :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
@ -93,6 +97,66 @@
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
</p> </p>
</template> </template>
<DxSummary>
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" 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_selesai" 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_selesai" 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="total_inproses" 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_inproses" 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="avg_durasi_dispatch"
summary-type="avg" css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
summary-type="avg" css-class="!text-center"
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
summary-type="avg" css-class="!text-center"
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
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_dibawah_sla_dispatch"
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="avg_durasi_response"
summary-type="avg" css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
summary-type="avg" css-class="!text-center"
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
summary-type="avg" css-class="!text-center"
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
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_dibawah_sla_response"
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="avg_durasi_recovery"
summary-type="avg" css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
summary-type="avg" css-class="!text-center"
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
summary-type="avg" css-class="!text-center"
:customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
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_dibawah_sla_recovery"
summary-type="sum" css-class="!text-right"
:customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
</DxSummary>
</DxDataGrid> </DxDataGrid>
</div> </div>
@ -101,69 +165,69 @@
<div class="w-full mb-4 lg:w-[70%] lg:float-left"> <div class="w-full mb-4 lg:w-[70%] lg:float-left">
<div class="p-4 bg-white rounded-xl lg:mr-4"> <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" <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dummyData.gangguan.rekap.detailGangguan"
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
@selection-changed="onDataSubSelectionChanged" :column-width="100" @exporting="onExporting" :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
:allow-column-resizing="true" column-resizing-mode="widget"> @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="5" :enabled="true" /> <DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="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" /> :show-info="true" :show-navigation-buttons="true" />
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
v-if="loading" v-model:visible="loading" :enabled="true" /> v-model:visible="loadingSubData" :enabled="true" />
<DxSearchPanel :visible="true" :highlight-case-sensitive="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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center" <DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" :calculateCellValue="(item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1"
cell-template="cellLeft" /> data-type="number" caption="No" cell-template="cellRight" />
<DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column" <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="No Lapor" css-class="custom-table-column"
cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl/Jam Lapor"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl/Jam Datang" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Lapor"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Tgl/Jam Nyala" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl/Jam Lapor"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Response Time" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl/Jam Datang"
css-class="custom-table-column" cell-template="data-waktu" /> :allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Recovery Time" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl/Jam Nyala"
css-class="custom-table-column" cell-template="data-waktu" /> :allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu" <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" /> :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="150" alignment="center" data-field="" caption="Duras Perjalanan Regu" <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan Regu"
:allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" /> :allow-resizing="false" css-class="custom-table-column" cell-template="data-waktu" />
<DxColumn :width="150" alignment="center" data-field="" caption="Jarak Closing (m)" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="jarak_closing" caption="Jarak Closing (m)"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="dispatch_oleh" caption="Dispatch Oleh"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Sumber Lapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="diselesaikan_oleh" caption="Diselesaikan Oleh"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Dispatch Oleh" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="kode_gangguan" caption="Kode Gangguan"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="jenis_gangguan" caption="Jenis Gangguan"
:allow-resizing="false" css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="IDPEL/NO METER" :allow-resizing="false" <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="200" alignment="center" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="200" alignment="center" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Diselesaikan Oleh" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Status" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Kode Gangguan" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Penyebab" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" />
<DxColumn :width="150" alignment="center" data-field="" caption="Tindakan" :allow-resizing="false"
css-class="custom-table-column" cell-template="cellLeft" /> css-class="custom-table-column" cell-template="cellLeft" />
<template #cellLeft="{ data }"> <template #cellLeft="{ data }">
@ -172,6 +236,12 @@
</p> </p>
</template> </template>
<template #cellRight="{ data }">
<p class="text-right cursor-pointer">
{{ data.text }}
</p>
</template>
<template #data-waktu="{ data }"> <template #data-waktu="{ data }">
<p> <p>
{{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
@ -185,38 +255,41 @@
<div class="p-4 space-y-2 bg-white rounded-xl"> <div class="p-4 space-y-2 bg-white rounded-xl">
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time) <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_response_time) ? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-' : '-'
" class-name="flex-1" /> " class-name="flex-1" />
</div> </div>
@ -231,82 +304,85 @@
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_dispatch_time)
? formatWaktu(dataSubSelected?.durasi_dispatch_time)
: '-'
" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Jarak Closing (m):</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.jarak_closing" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.dispatch_oleh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" type="textarea" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.pembuat_laporan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.diselesaikan_oleh" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <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> <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.jenis_gangguan" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
</div> </div>
<div class="flex flex-row items-center justify-between w-full"> <div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3> <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
<InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" /> <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
</div> </div>
@ -328,9 +404,11 @@ import {
DxPager, DxPager,
DxPaging, DxPaging,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxSummary,
DxGroupItem,
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { onMounted, ref } from 'vue' import { onMounted, ref, watch } from 'vue'
import { jsPDF } from 'jspdf' import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter' import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter' import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@ -353,19 +431,22 @@ const dataSelected = ref<any>()
const dataSubSelected = ref<any>() const dataSubSelected = ref<any>()
const dialogDataSelected = ref(false) const dialogDataSelected = ref(false)
const closeDialogDataSelected = () => dialogDataSelected.value = false const closeDialogDataSelected = () => dialogDataSelected.value = false
const showDialogDataSelected = () => dialogDataSelected.value = true const loadingData = ref(false)
const loadingSubData = ref(false)
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
const filterData = (params: any) => {
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
dateFrom: new Date().toISOString().slice(0, 10), dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10), dateTo: new Date().toISOString().slice(0, 10),
posko: 0, posko: 0,
idUid: 0, idUid: 0,
idUp3: 0 idUp3: 0
}) })
const filterData = (params: any) => {
const { posko, uid, up3 } = params const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ') const dateValue = params.periode.split(' s/d ')
refetch({ refetch({
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
@ -377,6 +458,7 @@ const filterData = (params: any) => {
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
}) })
onResult((queryResult) => { onResult((queryResult) => {
if (queryResult.data != undefined) { if (queryResult.data != undefined) {
data.value = queryResult.data.rekapitulasiAllGangguan data.value = queryResult.data.rekapitulasiAllGangguan
@ -384,9 +466,59 @@ const filterData = (params: any) => {
console.log(queryResult.loading) console.log(queryResult.loading)
console.log(queryResult.networkStatus) console.log(queryResult.networkStatus)
}) })
onError((error) => { onError((error) => {
console.log(error) console.log(error)
}) })
watch(loading, (value) => {
loadingData.value = value
})
}
const getDetail = () => {
const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAllDetail, {
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: 0,
idUid: 0,
idUp3: 0
})
const { posko, uid, up3 } = filters
const dateValue = params.periode.split(' s/d ')
refetch({
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),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
dataSub.value = queryResult.data.detailGangguan
}
})
onError((error) => {
console.log(error)
})
watch(loading, (value) => {
loadingSubData.value = value
})
dataSub.value = dummyData.gangguan.rekap.detailGangguan
}
const showDialogDataSelected = () => {
dialogDataSelected.value = true
getDetail()
} }
const onExporting = (e: any) => { const onExporting = (e: any) => {
@ -434,4 +566,4 @@ const filters = ref()
onMounted(() => { onMounted(() => {
data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan data.value = dummyData.gangguan.rekap.rekapitulasiAllGangguan
}) })
</script>@/utils/api/graphql </script>

44
src/utils/api/api.graphql.ts
View File

@ -1034,6 +1034,50 @@ export const queries = {
} }
} }
`, `,
gangguanAllDetail: gql`
query daftarGangguanDiselesaikanMobileAPKT(
$dateFrom: Date!
$dateTo: Date!
$posko: Int!
$idUid: Int!
$idUp3: Int!
) {
detailGangguan (
dateFrom:$dateFrom
dateTo:$dateTo
posko:$posko
idUid:$idUid
idUp3:$idUp3
) {
id
no_laporan
pembuat_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_dispatch_time
durasi_response_time
durasi_recovery_time
status_akhir
is_marking
referensi_marking
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_posko
jarak_closing
dispatch_oleh
diselesaikan_oleh
penyebab
tindakan
kode_gangguan
jenis_gangguan
}
}
`,
gangguanAlihPosko: gql` gangguanAlihPosko: gql`
query rekapitulasiGangguanAlihPosko( query rekapitulasiGangguanAlihPosko(
$dateFrom: Date! $dateFrom: Date!

2746
src/utils/dummy.ts
View File

File diff suppressed because it is too large Load Diff