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

Add new fields and columns to Gangguan tables

Browse Source
This commit is contained in:
kur0nek-o
2024-02-28 21:11:13 +07:00
parent 68fd3e6bee
commit dc7a2ed25e
5 changed files with 238 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/components/Pages/Gangguan/Table_1.vue
View File

@ -4,66 +4,213 @@
</Filters>
<div id="dataTable">
<DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
:hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
:allow-column-resizing="true" column-resizing-mode="widget">
<DxDataGrid
class="max-h-[calc(100vh-140px)]"
:remote-operations="true"
:data-source="data"
key-expr="no_laporan"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:row-alternation-enabled="true"
:hover-state-enabled="true"
@selection-changed="onSelectionChanged"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<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" />
<DxPager
:visible="true"
:allowed-page-sizes="[5, 10, 20]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
caption="Pembuat Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
caption="Tgl Lapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
caption="Tgl Dialihkan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
caption="Tgl Response" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
caption="Tgl Recovery" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
caption="Posko Awal" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
caption="Posko Tujuan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
caption="Nama Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
caption="Alamat Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
caption="No Telp Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
caption="Keterangan Pelapor" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
cell-template="data" />
<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) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="pembuat_laporan"
caption="Pembuat Laporan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_dialihkan"
caption="Tgl Dialihkan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Response"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Recovery"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko_lama"
caption="Posko Awal"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko_baru"
caption="Posko Tujuan"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
cell-template="data"
/>
<DxColumn
css-class="custom-table-column"
:width="170"
alignment="center"
data-field="nama_posko_lama"
caption="Posko"
cell-template="data"
/>
<template #data="{ data }">
<span class="cursor-pointer" @click="showData()">
<p class="cursor-pointer" @click="showData()">
{{ data.text }}
</span>
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
<DetailDialog
:open="showDetail"
title="Daftar Gangguan Dialihkan ke Posko Lain"
@on-close="closeDetail"
>
<div class="w-full 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-[170px] text-gray-800">No Laporan:</h3>
@ -132,7 +279,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
<InputText
:readonly="true"
type="textarea"
:value="dataDetail?.alamat_pelapor"
class-name="flex-1 h-[56px]"
/>
</div>
<div class="flex flex-row items-center justify-between w-full">

8
src/components/Pages/Gangguan/Table_12.vue
View File

@ -52,14 +52,14 @@
<DxColumn
:width="120"
alignment="center"
data-field="id_regu"
data-field="kode_regu"
caption="Kode"
css-class="custom-table-column"
/>
<DxColumn
:width="120"
alignment="center"
data-field="id_regu"
data-field="kode_regu"
caption="Kode"
css-class="custom-table-column"
group-index="0"
@ -388,7 +388,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
idUid: $idUid
idUp3: $idUp3
) {
id_regu
kode_regu
nama_regu
avg_durasi_recovery
avg_durasi_response
@ -473,7 +473,7 @@ const filterData = (params: any) => {
queryResult.data.rekapitulasiGangguanPerRegu.forEach((item: any) => {
const entry = {
no: Number(i++),
id_regu: item.id_regu,
kode_regu: item.kode_regu,
nama_regu: item.nama_regu,
laporan: {
total: item.total,

15
src/components/Pages/Gangguan/Table_13.vue
View File

@ -48,6 +48,15 @@
data-type="number"
caption="No"
/>
<DxColumn
:width="120"
alignment="center"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
group-index="0"
v-if="filters.groupBy"
/>
<DxColumn
:width="170"
alignment="center"
@ -290,6 +299,8 @@ const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
idUid: $idUid
idUp3: $idUp3
) {
id_uid
nama_uid
nama_posko
avg_durasi_recovery
avg_durasi_response
@ -345,5 +356,7 @@ const filterData = (params: any) => {
})
}
const filters = ref()
const filters = ref({
groupBy: false
})
</script>

15
src/components/Pages/Gangguan/Table_14.vue
View File

@ -54,10 +54,12 @@
/>
<DxColumn
:width="170"
alignment="center"
data-field="media"
caption="Nama Media"
alignment="center"
cell-template="data"
css-class="custom-table-column"
header-cell-template="title-header"
/>
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn
@ -77,6 +79,17 @@
caption="Total"
css-class="custom-table-column"
/>
<template #data="{ data }">
<p class="text-left cursor-pointer">
{{ data.text }}
</p>
</template>
<template #title-header="{ data }">
<p class="text-center w-full">
{{ data.column.caption }}
</p>
</template>
</DxDataGrid>
</div>
</template>

3
src/components/Pages/Gangguan/Table_3.vue
View File

@ -367,6 +367,9 @@ const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
idpel_nometer
keterangan_pelapor
media
penyebab
referensi_marking
tindakan
nama_pelapor
is_marking
no_laporan