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

Merge branch 'dev-eko' of github.com:defuj/eis into dev-bagus

Browse Source
This commit is contained in:
kur0nek-o 2024-04-05 17:06:51 +07:00
commit 1b28a1041c
45 changed files with 6423 additions and 6712 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1993
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -46,6 +46,7 @@
"qs": "^6.11.2",
"uuid": "^9.0.1",
"vue": "^3.3.4",
"vue-html-to-paper": "^2.0.3",
"vue-router": "^4.2.2",
"vue-tailwind-datepicker": "^1.6.1",
"vue3-star-ratings": "^3.0.5"
@ -78,4 +79,4 @@
"vitest": "^1.3.1",
"vue-tsc": "^2.0.5"
}
}
}

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

File diff suppressed because it is too large Load Diff

447
src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
View File

@ -1,31 +1,14 @@
<template>
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)"
class="mb-4"
>
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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">
<DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
@ -33,87 +16,30 @@
<!-- -->
<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
css-class="custom-table-column"
:width="50"
alignment="center"
data-field="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_up3"
caption="Nama UP3"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_uid"
caption="Nama UID"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" caption="No"
cell-template="formatNumber" />
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn alignment="center" :min-width="180" data-field="nama_uid" caption="Nama UID"
css-class="custom-table-column" :group-index="0" />
<DxColumn
alignment="center"
:min-width="180"
data-field="nama_posko"
caption="Nama Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="180"
alignment="center"
data-field="posko_in"
caption="Posko IN"
css-class="custom-table-column"
cell-template="formatNumberPoskoIn"
/>
<DxColumn
:width="180"
alignment="center"
data-field="posko_out"
caption="Posko OUT"
css-class="custom-table-column"
cell-template="formatNumberPoskoOut"
/>
<DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
cell-template="formatNumberPoskoIn" />
<DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
css-class="custom-table-column" cell-template="formatNumberPoskoOut" />
<DxSummary>
<DxGroupItem
:show-in-group-footer="true"
column="number"
display-format="Total"
css-class="!text-left"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="posko_in"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="posko_out"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
<template #formatText="{ data }">
@ -125,227 +51,94 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="setPoskoSelected('')">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberPoskoIn="{ data }">
<p class="text-right cursor-pointer" @click="setPoskoSelected('in')">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberPoskoOut="{ data }">
<p class="text-right cursor-pointer" @click="setPoskoSelected('out')">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Alih Posko"
@on-close="closeDialog"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Alih Posko" @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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="media"
caption="Sumber Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Nama Petugas"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko Asal"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Posko Tujuan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column"
cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="" caption="Posko Asal" css-class="custom-table-column"
cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="" caption="Posko Tujuan" css-class="custom-table-column"
cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -381,46 +174,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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 Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -440,29 +215,17 @@
<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="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -526,7 +289,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToXLSX,
exportDetailToPDF
exportDetailToPDF,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -613,6 +378,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -622,6 +388,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

403
src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
View File

@ -1,84 +1,35 @@
<template>
<Filters
@reset-form="data = []"
:report-button="true"
@run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)"
class="mb-4"
>
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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"
:column-width="100" @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" />
<!-- -->
<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
css-class="custom-table-column"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
data-field="no"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
data-field="media"
caption="Nama Media"
alignment="center"
cell-template="formatText"
css-class="custom-table-column"
header-cell-template="title-header"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
data-field="no" cell-template="formatNumber" />
<DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="formatText"
css-class="custom-table-column" header-cell-template="title-header" />
<DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
<DxColumn
v-for="i in 31"
:width="100"
alignment="center"
:data-field="`tgl${i}`"
data-type="number"
:caption="i"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
:caption="i" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn
:width="170"
alignment="center"
data-field="total"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
cell-template="formatNumber" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
@ -89,12 +40,12 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="setDate(data.column.caption)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -105,208 +56,66 @@
</template>
<DxSummary>
<DxTotalItem
display-format="Total"
show-in-column="media"
css-class="text-white !text-left"
/>
<DxTotalItem
v-for="i in 31"
summary-type="sum"
display-format="{0}"
:column="`tgl${i}`"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem display-format="Total" show-in-column="media" css-class="text-white !text-l eft" />
<DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Berdasarkan Media"
@on-close="closeDialog"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Berdasarkan Media" @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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -342,46 +151,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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 Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -391,11 +182,7 @@
<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>
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -410,29 +197,17 @@
<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="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -485,7 +260,9 @@ import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -576,6 +353,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -585,6 +363,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

376
src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
View File

@ -1,149 +1,50 @@
<template>
<Filters
@run-report="() => exportToPDF(reportMeta, data, true)"
@reset-form="data = []"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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" />
<!-- -->
<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
width="200"
alignment="center"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
cell-template="formatText" />
<DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
<DxColumn
alignment="center"
data-field="month1"
data-type="number"
caption="Januari"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month2"
data-type="number"
caption="Februari"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month3"
data-type="number"
caption="Maret"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month4"
data-type="number"
caption="April"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month5"
data-type="number"
caption="Mei"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month6"
data-type="number"
caption="Juni"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month7"
data-type="number"
caption="Juli"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month8"
data-type="number"
caption="Agustus"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month9"
data-type="number"
caption="September"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month10"
data-type="number"
caption="Oktober"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month11"
data-type="number"
caption="November"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="month12"
data-type="number"
caption="Desember"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" data-field="month1" data-type="number" caption="Januari"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month2" data-type="number" caption="Februari"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month3" data-type="number" caption="Maret"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month4" data-type="number" caption="April"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month5" data-type="number" caption="Mei"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month6" data-type="number" caption="Juni"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month7" data-type="number" caption="Juli"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month8" data-type="number" caption="Agustus"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month9" data-type="number" caption="September"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month10" data-type="number" caption="Oktober"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month11" data-type="number" caption="November"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="month12" data-type="number" caption="Desember"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<template #formatText="{ data }">
@ -155,153 +56,56 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="setMonth(data.column.caption)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Data Detail Cleansing Transaksi TM"
@on-close="closedialogDetail"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Data Detail Cleansing Transaksi TM" @on-close="closedialogDetail"
: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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tgl_catat"
caption="Tgl Catat"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tgl_pekerjaan"
caption="Tgl Pekerjaan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tgl_nyala"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_pencatatan"
caption="Durasi Pencatatan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="keterangan_cleansing"
caption="Keterangan Cleansing"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tindakan"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tgl_catat" caption="Tgl Catat"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tgl_pekerjaan" caption="Tgl Pekerjaan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tgl_nyala" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_pencatatan" caption="Durasi Pencatatan"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="keterangan_cleansing" caption="Keterangan Cleansing"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -348,37 +152,23 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Pencatatan:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_pencatatan)
? formatWaktu(dataSubSelected?.durasi_pencatatan)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_pencatatan)
? formatWaktu(dataSubSelected?.durasi_pencatatan)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" 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 CLeansing:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.keterangan_cleansing"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_cleansing" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -429,7 +219,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_CTTM'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -567,6 +359,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -576,6 +369,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

640
src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
View File

@ -1,135 +1,60 @@
<template>
<Filters
@reset-form="data = []"
@run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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" />
<!-- -->
<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
:width="50"
alignment="center"
caption="NO"
css-class="custom-table-column"
rowspan="4"
colspan="2"
>
<DxColumn
:width="50"
alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
caption="a"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
<DxColumn :width="50" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="nama_regu"
caption="b"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="b" css-class="custom-table-column"
cell-template="formatText" />
</DxColumn>
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="kode_regu"
caption="c"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column"
cell-template="formatText" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
caption="d=(e+g)"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total" caption="d=(e+g)" css-class="custom-table-column"
cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
caption="e"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_selesai"
caption="f=(e/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
caption="g"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total_inproses" caption="g"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="persen_inproses"
caption="h=(g/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="persen_inproses" caption="h=(g/d)*100"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -139,47 +64,23 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_mobile_nonmarking"
caption="i"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total_mobile_nonmarking" caption="i"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="j=(i/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="" caption="j=(i/d)*100"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response_time_mobile_nonmarking"
caption="k"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_mobile_nonmarking"
caption="k" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery_time_mobile_nonmarking"
caption="l"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_mobile_nonmarking"
caption="l" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -187,47 +88,23 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_mobile_marking"
caption="m"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total_mobile_marking" caption="m"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="n=(m/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="" caption="n=(m/d)*100"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response_time_mobile_marking"
caption="o"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_mobile_marking"
caption="o" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery_time_mobile_marking"
caption="p"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_mobile_marking"
caption="p" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -237,47 +114,23 @@
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_nonmobile_nonmarking"
caption="q"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total_nonmobile_nonmarking" caption="q"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="r=(q/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="" caption="r=(q/d)*100"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response_time_nonmobile_nonmarking"
caption="s"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_nonmobile_nonmarking"
caption="s" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
caption="t"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
caption="t" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -285,47 +138,23 @@
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_nonmobile_marking"
caption="u"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="total_nonmobile_marking" caption="u"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="v=(u/d)*100"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="" caption="v=(u/d)*100"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response_time_nonmobile_marking"
caption="w"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_nonmobile_marking"
caption="w" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery_time_nonmobile_marking"
caption="x"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_nonmobile_marking"
caption="x" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
</DxColumn>
@ -341,12 +170,12 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -363,235 +192,74 @@
</template>
<DxSummary>
<DxTotalItem
display-format="TOTAL"
show-in-column="nama_regu"
css-class="text-white !text-right"
/>
<DxTotalItem
column="total"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_selesai"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_mobile_marking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_mobile_nonmarking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_nonmobile_marking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_nonmobile_nonmarking"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem display-format="TOTAL" show-in-column="nama_regu" css-class="text-white !text-right" />
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_selesai" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_mobile_marking" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_mobile_nonmarking" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_nonmobile_marking" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_nonmobile_nonmarking" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
@on-close="closeDialog"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
@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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -627,46 +295,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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 Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -676,11 +326,7 @@
<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>
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -695,29 +341,17 @@
<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="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -770,7 +404,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -853,6 +489,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -862,6 +499,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

458
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
View File

@ -1,396 +1,123 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
<template>
<Filters
:report-button="true"
@reset-form="data = []"
@run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)"
class="mb-4"
>
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<!-- -->
<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" />
<DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
<DxColumn
:width="60"
alignment="center"
data-field="no"
caption="NO"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="kode"
caption="Kode"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
data-field="sub_kelompok"
css-class="custom-table-column"
:group-index="0"
caption=""
cell-template="formatText"
:calculate-group-value="
(rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
"
/>
<DxColumn
:width="250"
alignment="center"
data-field="tipe_permasalahan"
caption="Jenis Gangguan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
cell-template="formatText" />
<DxColumn :width="120" alignment="center" data-field="sub_kelompok" css-class="custom-table-column"
:group-index="0" caption="" cell-template="formatText" :calculate-group-value="(rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
" />
<DxColumn :width="250" alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_response"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_recovery"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxSummary :calculate-custom-summary="calculateCustomSummary">
<DxGroupItem
:show-in-group-footer="true"
column="no"
display-format="Total"
css-class="!text-left"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_selesai"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_selesai"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_inproses"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_inproses"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_response"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_response"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="max_durasi_response"
summary-type="max"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="min_durasi_response"
summary-type="min"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_diatas_sla_response"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_response"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_recovery"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_recovery"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="max_durasi_recovery"
summary-type="max"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="min_durasi_recovery"
summary-type="min"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_diatas_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
<DxGroupItem :show-in-group-footer="true" column="total" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_selesai" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="persen_selesai" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_inproses" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="persen_inproses" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_durasi_response" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="avg_durasi_response" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="max_durasi_response" summary-type="max" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="min_durasi_response" summary-type="min" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_response" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_response" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_durasi_recovery" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="avg_durasi_recovery" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="max_durasi_recovery" summary-type="max" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="min_durasi_recovery" summary-type="min" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_recovery" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_recovery" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
<template #formatText="{ data }">
@ -402,12 +129,12 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -444,7 +171,7 @@ import {
} from 'devextreme-vue/data-grid'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
import { apolloClient } from '@/utils/api/api.graphql'
import { provideApolloClient } from '@vue/apollo-composable'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -476,6 +203,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}

770
src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
View File

@ -1,45 +1,24 @@
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
<template>
<Filters
@reset-form="data = []"
:report-button="true"
@run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)"
class="mb-4"
>
<Filters @reset-form="data = []" :report-button="true" @run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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"
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
:word-wrap-enabled="true">
<DxGrouping expand-mode="rowClick" />
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<!-- -->
<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
@ -49,201 +28,62 @@
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
caption="No"
/> -->
<DxColumn
:width="120"
alignment="center"
data-field="kode"
caption="Kode"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="120"
alignment="center"
data-field="id_fasilitas"
caption=""
css-class="custom-table-column"
cell-template="formatText"
name="idFasilitasGroup"
:group-index="0"
/>
<DxColumn
:width="150"
alignment="center"
data-field="sub_kelompok"
caption="Sub Kelompok (Equipment)"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
cell-template="formatText" />
<DxColumn :width="120" alignment="center" data-field="id_fasilitas" caption="" css-class="custom-table-column"
cell-template="formatText" name="idFasilitasGroup" :group-index="0" />
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_response"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_recovery"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
@ -256,48 +96,48 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -308,330 +148,96 @@
</template>
<DxSummary>
<DxGroupItem
:show-in-group-footer="true"
column="Kode"
display-format="Total"
css-class="!text-left"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_selesai"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_selesai"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_inproses"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="persen_inproses"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_response"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_response"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="max_durasi_response"
summary-type="max"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="min_durasi_response"
summary-type="min"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_diatas_sla_response"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_response"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_durasi_recovery"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="avg_durasi_recovery"
summary-type="avg"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="max_durasi_recovery"
summary-type="max"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="min_durasi_recovery"
summary-type="min"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_diatas_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="true"
column="total_dibawah_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem :show-in-group-footer="true" column="Kode" display-format="Total" css-class="!text-left" />
<DxGroupItem :show-in-group-footer="true" column="total" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_selesai" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="persen_selesai" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_inproses" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="persen_inproses" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_durasi_response" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="avg_durasi_response" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="max_durasi_response" summary-type="max" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="min_durasi_response" summary-type="min" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_response" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_response" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_durasi_recovery" summary-type="sum" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="avg_durasi_recovery" summary-type="avg" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="max_durasi_recovery" summary-type="max" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="min_durasi_recovery" summary-type="min" display-format="{0}"
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_recovery" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_recovery" summary-type="sum"
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004"
@on-close="closeDialog"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004" @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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="id_pelnomormeter"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="id_pelnomormeter" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -667,46 +273,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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 Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -716,20 +304,12 @@
<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>
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" 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">IDPEL/NO METER:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.id_pelnomormeter"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.id_pelnomormeter" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -739,29 +319,17 @@
<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="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -815,7 +383,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -856,6 +426,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -865,6 +436,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

1044
src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
View File

File diff suppressed because it is too large Load Diff

6
src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
View File

@ -899,7 +899,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -993,6 +995,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -1002,6 +1005,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

9
src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
View File

@ -907,7 +907,10 @@ import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -1004,6 +1007,8 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -1013,6 +1018,8 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

769
src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
View File

@ -1,239 +1,81 @@
<template>
<Filters
@reset-form="data = []"
@run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)"
:report-button="true"
class="mb-4"
>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)"
@run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" class="mb-4">
<Type9 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
:column-width="100"
@exporting="onExporting"
:allow-column-resizing="true"
column-resizing-mode="widget"
:word-wrap-enabled="true"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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"
:column-width="100" @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" />
<!-- -->
<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
css-class="custom-table-column"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
group-index="0"
v-if="isGroupBy"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal"
caption="Tanggal Lapor"
css-class="custom-table-column"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
group-index="0" v-if="isGroupBy" />
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
css-class="custom-table-column" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_response"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_durasi_recovery"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="120"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
</DxColumn>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
:width="120"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="120"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
@ -246,48 +88,48 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -298,334 +140,101 @@
</template>
<DxSummary :calculate-custom-summary="calculateCustomSummary">
<DxTotalItem
display-format="TOTAL"
show-in-column="tanggal"
css-class="text-white !text-left"
/>
<DxTotalItem
column="total"
name="total"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_selesai"
name="total_selesai"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_selesai"
name="persen_selesai"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem display-format="TOTAL" show-in-column="tanggal" css-class="text-white !text-left" />
<DxTotalItem column="total" name="total" summary-type="custom" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_selesai" name="total_selesai" summary-type="custom" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="persen_selesai" name="persen_selesai" summary-type="custom" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxTotalItem
column="total_inproses"
name="total_inproses"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="persen_inproses"
name="persen_inproses"
summary-type="custom"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem column="total_inproses" name="total_inproses" summary-type="custom" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="persen_inproses" name="persen_inproses" summary-type="custom" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxTotalItem
column="total_durasi_response"
name="total_durasi_response"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_response"
name="avg_durasi_response"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_response"
name="max_durasi_response"
summary-type="max"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem
column="min_durasi_response"
name="min_durasi_response"
summary-type="min"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem column="total_durasi_response" name="total_durasi_response" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="avg_durasi_response" name="avg_durasi_response" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="max_durasi_response" name="max_durasi_response" summary-type="max" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
<DxTotalItem column="min_durasi_response" name="min_durasi_response" summary-type="min" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
<DxTotalItem
column="total_diatas_sla_response"
name="total_diatas_sla_response"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_response"
name="total_dibawah_sla_response"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem column="total_diatas_sla_response" name="total_diatas_sla_response" summary-type="sum"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_dibawah_sla_response" name="total_dibawah_sla_response" summary-type="sum"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem
column="total_durasi_recovery"
name="total_durasi_recovery"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="avg_durasi_recovery"
name="avg_durasi_recovery"
summary-type="avg"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="max_durasi_recovery"
name="max_durasi_recovery"
summary-type="max"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem
column="min_durasi_recovery"
name="min_durasi_recovery"
summary-type="min"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatWaktu(e.value)"
/>
<DxTotalItem column="total_durasi_recovery" name="total_durasi_recovery" summary-type="sum" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="avg_durasi_recovery" name="avg_durasi_recovery" summary-type="avg" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="max_durasi_recovery" name="max_durasi_recovery" summary-type="max" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
<DxTotalItem column="min_durasi_recovery" name="min_durasi_recovery" summary-type="min" display-format="{0}"
css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
<DxTotalItem
column="total_diatas_sla_recovery"
name="total_diatas_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
column="total_dibawah_sla_recovery"
name="total_dibawah_sla_recovery"
summary-type="sum"
display-format="{0}"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem column="total_diatas_sla_recovery" name="total_diatas_sla_recovery" summary-type="sum"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem column="total_dibawah_sla_recovery" name="total_dibawah_sla_recovery" summary-type="sum"
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Gangguan/Tanggal"
@on-close="closeDialog"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan/Tanggal" @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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="id_pelnomormeter"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="id_pelnomormeter" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -661,46 +270,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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 Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -710,20 +301,12 @@
<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>
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" 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">IDPEL/NO METER:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.id_pelnomormeter"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.id_pelnomormeter" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -733,29 +316,17 @@
<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="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -808,7 +379,9 @@ import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -906,6 +479,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -915,6 +489,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

6
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
View File

@ -660,7 +660,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -807,6 +809,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -816,6 +819,7 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

577
src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
View File

@ -1,194 +1,70 @@
<template>
<Filters
@reset-form="data = []"
@run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)"
:report-button="true"
class="mb-4"
>
<Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
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"
>
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" 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">
<DxSelection mode="single" />
<DxPaging :enabled="false" />
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
<!-- -->
<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
:width="50"
alignment="center"
caption="NO"
data-type="number"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="kode_regu"
caption="Kode"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="nama_regu"
caption="Nama Regu"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn :width="50" alignment="center" caption="NO" data-type="number"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<DxColumn
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumberLaporanTotal"
/>
<DxColumn alignment="center" data-field="total" data-type="number" caption="Total"
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
<DxColumn
alignment="center"
data-field="total_inproses"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlBelumSelesai"
/>
<DxColumn
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
<DxColumn alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
<DxColumn
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumberLaporanJmlSelesai"
/>
<DxColumn
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
<DxColumn alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
<DxColumn
alignment="center"
data-field="total_rating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="nilai_rating1"
data-type="number"
caption="1"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="nilai_rating2"
data-type="number"
caption="2"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="nilai_rating3"
data-type="number"
caption="3"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="nilai_rating4"
data-type="number"
caption="4"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="nilai_rating5"
data-type="number"
caption="5"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
alignment="center"
data-field="indeks_rating"
data-type="number"
caption="Index"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn alignment="center" data-field="total_rating" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="nilai_rating1" data-type="number" caption="1"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="nilai_rating2" data-type="number" caption="2"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="nilai_rating3" data-type="number" caption="3"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="nilai_rating4" data-type="number" caption="4"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="nilai_rating5" data-type="number" caption="5"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" data-field="indeks_rating" data-type="number" caption="Index"
css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
</DxColumn>
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_nonrating"
data-type="number"
caption="Jml"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_nonrating"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatPercentage"
/>
<DxColumn :width="150" alignment="center" data-field="total_nonrating" data-type="number" caption="Jml"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="70" alignment="center" data-field="persen_nonrating" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatPercentage" />
</DxColumn>
<template #formatText="{ data }">
@ -206,48 +82,48 @@
<template #formatNumber="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanTotal="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
<template #formatNumberLaporanJmlBelumSelesai="{ data }">
<p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
{{
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
isNumber(data.text)
? data.column.caption == '%'
? formatPercentage(data.text)
: formatNumber(data.text)
: data.text
}}
</p>
</template>
@ -259,192 +135,58 @@
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rating Per Regu"
@on-close="closeDialog"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rating Per Regu" @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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
:visible="true"
:allowed-page-sizes="[20, 50, 100]"
display-mode="full"
:show-page-size-selector="true"
:show-info="true"
:show-navigation-buttons="true"
/>
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
data-type="number"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_laporan"
caption="No Laporan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nilai_rating"
caption="Rating"
css-class="custom-table-column"
cell-template="formatRating"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Tgl Datang"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Tgl Nyala"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_recovery_time"
caption="Durasi Recovery Time"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="status_akhir"
caption="Status"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="referensi_marking"
caption="Referensi Marking"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Telp Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_posko"
caption="Posko"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="tindakan"
caption="Tidakan"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="penyebab"
caption="Penyebab"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
caption="No" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nilai_rating" caption="Rating"
css-class="custom-table-column" cell-template="formatRating" />
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -466,14 +208,8 @@
<template #formatRating="{ data }">
<div class="flex justify-center cursor-pointer">
<vue3starRatings
v-model="data.text"
:starSize="20"
starColor="#CCCC00"
inactiveColor="#D1D5DB"
:numberOfStars="5"
:disableClick="true"
/>
<vue3starRatings v-model="data.text" :starSize="20" starColor="#CCCC00" inactiveColor="#D1D5DB"
:numberOfStars="5" :disableClick="true" />
</div>
</template>
</DxDataGrid>
@ -488,17 +224,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.nilai_rating)
? parseInt(dataSubSelected?.nilai_rating) > 0
? `${parseInt(dataSubSelected?.nilai_rating)} Bintang`
: `Tidak Ada Bintang`
: `Tidak Ada Bintang`
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.nilai_rating)
? parseInt(dataSubSelected?.nilai_rating) > 0
? `${parseInt(dataSubSelected?.nilai_rating)} Bintang`
: `Tidak Ada Bintang`
: `Tidak Ada Bintang`
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -508,46 +239,28 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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 Nyala:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" 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="
parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
" 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 Recovery Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -557,11 +270,7 @@
<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>
<InputText
:readonly="true"
:value="dataSubSelected?.referensi_marking"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -576,29 +285,17 @@
<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="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -650,7 +347,9 @@ import {
exportToPDF,
exportDetailToPDF,
exportToXLSX,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -750,6 +449,8 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -759,6 +460,8 @@ const onExportingDetail = (e: any) => {
} else if (e.format === 'xlsx') {
exportDetailToXLSX(reportMeta.value, e)
} else {
exportDetailToDOCX(reportMeta.value, dataSub.value)
}
}

352
src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
View File

@ -31,243 +31,68 @@
<DxSelection mode="single" />
<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
alignment="center"
:width="200"
data-field="nama_ulp"
caption="Nama Unit"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn alignment="center" :width="200" data-field="nama_ulp" caption="Nama Unit"
css-class="custom-table-column" />
<DxColumn
:width="150"
alignment="center"
data-field=""
caption="Semua Unit"
css-class="custom-table-column"
:group-index="0"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_regional"
caption="Regional"
css-class="custom-table-column"
:group-index="1"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_uid"
caption="UID"
css-class="custom-table-column"
:group-index="2"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_up3"
caption="UP3"
css-class="custom-table-column"
:group-index="3"
/>
<DxColumn :width="150" alignment="center" data-field="" caption="Semua Unit" css-class="custom-table-column"
:group-index="0" />
<DxColumn :width="150" alignment="center" data-field="nama_regional" caption="Regional"
css-class="custom-table-column" :group-index="1" />
<DxColumn :width="150" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
:group-index="2" />
<DxColumn :width="150" alignment="center" data-field="nama_up3" caption="UP3" css-class="custom-table-column"
:group-index="3" />
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total"
data-type="number"
caption="Total"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_selesai"
data-type="number"
caption="Selesai"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_selesai"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_inproses"
data-type="number"
caption="InProgress"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="70"
alignment="center"
data-field="persen_inproses"
data-type="number"
caption="%"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤ SLA"
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 :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption="> SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤ SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption="> SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤ SLA"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption="> SLA" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤ SLA" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
<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(e.value)"
/>
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" summary-type="sum"
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<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(e.value)" />
<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(e.value)" />
<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(e.value)" />
<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(e.value)" />
<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(e.value)" />
<DxGroupItem
:show-in-group-footer="false"
@ -393,29 +218,14 @@
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Detail Rekapitulasi Keluhan All"
@on-close="closedialogDetail"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Keluhan All" @on-close="closedialogDetail"
: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
:allow-column-reordering="true"
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="onExportingDetail"
:allow-column-resizing="true"
column-resizing-mode="widget"
>
<DxDataGrid :allow-column-reordering="true" 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="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
@ -428,11 +238,7 @@
/>
<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"
@ -612,20 +418,12 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_response"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" 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">Selesai Bidang Unit:</h3>
<InputText
:readonly="true"
:value="dataSubSelected?.waktu_recovery"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -671,30 +469,17 @@
<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"
type="textarea"
:value="dataSubSelected?.alamat_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.alamat_pelapor" 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="dataSubSelected?.no_telp_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" 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="dataSubSelected?.keterangan_pelapor"
class-name="flex-1"
/>
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -704,12 +489,7 @@
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.uraian"
class-name="flex-1"
/>
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.uraian" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">

6
src/components/Pages/Material/Daftar/Material_DGMYG.vue
View File

@ -273,7 +273,7 @@ const resetData = () => {
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
const { posko, uid, up3 } = params
const query = {
dateFrom: dateValue[0]
@ -282,8 +282,8 @@ const filterData = async (params: any) => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
idPosko: posko ? posko.id : 0
}

6
src/components/Pages/Material/Rekap/Material_RPM.vue
View File

@ -215,7 +215,7 @@ const resetData = () => {
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { posko, idUid, idUp3 } = params
const { posko, uid, up3 } = params
const query = {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
@ -223,8 +223,8 @@ const filterData = async (params: any) => {
dateTo: dateValue[1]
? dateValue[1].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
idUid: idUid ? idUid.id : 0,
idUp3: idUp3 ? idUp3.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0,
posko: posko ? posko.id : 0
}

41
src/report/Gangguan/Rekap/RGangguan_ALL.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from '@/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC'
const reportName = 'Rekapitulasi Gangguan All'
const fontSize = 5
@ -153,15 +154,15 @@ const formatData = (rawData: any) => {
const summary = data[regional][uid].summary
const avgDurasiDispatch = summary.avg_durasi_dispatch.length
? summary.avg_durasi_dispatch.reduce((a: any, b: any) => a + b) /
summary.avg_durasi_dispatch.length
summary.avg_durasi_dispatch.length
: 0
const avgDurasiResponse = summary.avg_durasi_response.length
? summary.avg_durasi_response.reduce((a: any, b: any) => a + b) /
summary.avg_durasi_response.length
summary.avg_durasi_response.length
: 0
const avgDurasiRecovery = summary.avg_durasi_recovery.length
? summary.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
summary.avg_durasi_recovery.length
summary.avg_durasi_recovery.length
: 0
formattedData.push([
@ -235,7 +236,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.avg_durasi_dispatch.length
? total.avg_durasi_dispatch.reduce((a: any, b: any) => a + b) /
total.avg_durasi_dispatch.length
total.avg_durasi_dispatch.length
: 0
),
formatWaktu(Math.max(...total.max_durasi_dispatch)),
@ -245,7 +246,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.avg_durasi_response.length
? total.avg_durasi_response.reduce((a: any, b: any) => a + b) /
total.avg_durasi_response.length
total.avg_durasi_response.length
: 0
),
formatWaktu(Math.max(...total.max_durasi_response)),
@ -255,7 +256,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.avg_durasi_recovery.length
? total.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
total.avg_durasi_recovery.length
total.avg_durasi_recovery.length
: 0
),
formatWaktu(Math.max(...total.max_durasi_recovery)),
@ -299,7 +300,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
const doc = new jsPDF({
orientation: 'landscape'
})
console.log(data)
autoTable(doc, {
head: [
['PT. PLN(Persero)', '', ''],
@ -642,28 +643,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -737,5 +735,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), reportName, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

28
src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
View File

@ -16,9 +16,9 @@ import { saveAs } from 'file-saver'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber } from '@/utils/numbers'
import { exportToWord, exportDetailToWord } from '@/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC'
const reportName = 'Rekapitulasi Gangguan Alih Posko'
const fontSize = 5
@ -397,28 +397,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -490,5 +487,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

27
src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
View File

@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
import { Workbook } from 'exceljs'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_BerdasarMedia_DOC'
const reportName = 'Rekapitulasi Gangguan Berdasarkan Media'
const fontSize = 5
@ -399,28 +400,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -494,5 +492,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

10
src/report/Gangguan/Rekap/RGangguan_CTTM.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_CTTM_DOC'
const reportName = 'Rekapitulasi Cleansing Transaksi TM'
const fontSize = 5
@ -505,5 +506,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX ,exportToDOCX,exportDetailToDOCX}

27
src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
View File

@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
import { Workbook } from 'exceljs'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_DMAPKT_DOC'
const reportName = 'Rekapitulasi Gangguan Diselesaikan Mobile APKT'
const fontSize = 4
@ -557,28 +558,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -652,5 +650,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

7
src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportToWord } from './doc/RGangguan_JenisGangguan_DOC'
const reportName = 'Rekapitulasi Gangguan Jenis Gangguan'
@ -552,5 +553,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportToDOCX }

34
src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_JenisGangguanSE_DOC'
const reportName = 'Rekapitulasi Gangguan Jenis Gangguan SE 004'
const fontSize = 5
@ -166,7 +167,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.total_response_time_rata_rata.length
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_response_time_rata_rata.length
total.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_response_time_max)),
@ -177,7 +178,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.total_recovery_time_rata_rata.length
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_recovery_time_rata_rata.length
total.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_recovery_time_max)),
@ -206,7 +207,7 @@ const formatData = (rawData: any) => {
formatNumber(
grandTotal.total_response_time_rata_rata.length
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_response_time_rata_rata.length
grandTotal.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@ -217,7 +218,7 @@ const formatData = (rawData: any) => {
formatNumber(
grandTotal.total_recovery_time_rata_rata.length
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_recovery_time_rata_rata.length
grandTotal.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@ -610,28 +611,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -706,4 +704,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

27
src/report/Gangguan/Rekap/RGangguan_KTI.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_KTI_DOC'
const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
const fontSize = 5
@ -476,28 +477,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -571,5 +569,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

45
src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
View File

@ -1,17 +1,5 @@
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import {
Document,
AlignmentType,
Packer,
Paragraph,
Table,
TableCell,
TableRow,
VerticalAlign,
TextRun,
WidthType,
PageOrientation
} from 'docx'
import { saveAs } from 'file-saver'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
@ -19,6 +7,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_PerPosko_DOC'
const reportName = 'Rekapitulasi Gangguan Per Posko'
const fontSize = 5
@ -165,7 +154,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.total_response_time_rata_rata.length
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_response_time_rata_rata.length
total.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_response_time_max)),
@ -176,7 +165,7 @@ const formatData = (rawData: any) => {
formatNumber(
total.total_recovery_time_rata_rata.length
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_recovery_time_rata_rata.length
total.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_recovery_time_max)),
@ -205,7 +194,7 @@ const formatData = (rawData: any) => {
formatNumber(
grandTotal.total_response_time_rata_rata.length
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_response_time_rata_rata.length
grandTotal.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@ -216,7 +205,7 @@ const formatData = (rawData: any) => {
formatNumber(
grandTotal.total_recovery_time_rata_rata.length
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_recovery_time_rata_rata.length
grandTotal.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@ -599,20 +588,18 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
@ -686,4 +673,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

49
src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
View File

@ -1,17 +1,5 @@
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import {
Document,
AlignmentType,
Packer,
Paragraph,
Table,
TableCell,
TableRow,
VerticalAlign,
TextRun,
WidthType,
PageOrientation
} from 'docx'
import { saveAs } from 'file-saver'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
@ -19,6 +7,8 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportDetailToWord } from './doc/RGangguan_PerRegu_DOC'
import { exportToWord } from './doc/RGangguan_PerPosko_DOC'
const reportName = 'Rekapitulasi Gangguan Per Regu'
const fontSize = 5
@ -168,7 +158,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
total.total_response_time_rata_rata.length
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_response_time_rata_rata.length
total.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_response_time_max)),
@ -179,7 +169,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
total.total_recovery_time_rata_rata.length
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_recovery_time_rata_rata.length
total.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_recovery_time_max)),
@ -258,7 +248,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
grandTotal.total_response_time_rata_rata.length
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_response_time_rata_rata.length
grandTotal.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@ -269,7 +259,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
grandTotal.total_recovery_time_rata_rata.length
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_recovery_time_rata_rata.length
grandTotal.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@ -661,28 +651,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -758,4 +745,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData, reportMeta.groupBy), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

35
src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_PerTanggal_DOC'
const reportName = 'Rekapitulasi Gangguan Per Tanggal'
const fontSize = 5
@ -167,7 +168,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
total.total_response_time_rata_rata.length
? total.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_response_time_rata_rata.length
total.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_response_time_max)),
@ -178,7 +179,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
total.total_recovery_time_rata_rata.length
? total.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
total.total_recovery_time_rata_rata.length
total.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...total.total_recovery_time_max)),
@ -256,7 +257,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
grandTotal.total_response_time_rata_rata.length
? grandTotal.total_response_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_response_time_rata_rata.length
grandTotal.total_response_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_response_time_max)),
@ -267,7 +268,7 @@ const formatData = (rawData: any, groupBy: boolean) => {
formatNumber(
grandTotal.total_recovery_time_rata_rata.length
? grandTotal.total_recovery_time_rata_rata.reduce((a: any, b: any) => a + b) /
grandTotal.total_recovery_time_rata_rata.length
grandTotal.total_recovery_time_rata_rata.length
: 0
),
formatWaktu(Math.max(...grandTotal.total_recovery_time_max)),
@ -655,28 +656,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -750,5 +748,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData, reportMeta.groupBy), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

24
src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { numberToStars } from '@/report/utils/rating'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_RatingPerPosko_DOC'
const reportName = 'Rekapitulasi Rating Per Posko'
const fontSize = 5
@ -415,20 +416,18 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
@ -501,5 +500,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

26
src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
View File

@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
import { numberToStars } from '@/report/utils/rating'
import { exportDetailToWord, exportToWord } from './doc/RGangguan_RatingPerRegu_DOC'
const reportName = 'Rekapitulasi Rating Per Regu'
const fontSize = 5
@ -395,28 +396,25 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
)
setHeaderStyle(
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -491,4 +489,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
const exportToDOCX = (reportMeta: any, rawData: any) => {
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
}
const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
exportDetailToWord(reportMeta, rawData, `Laporan Detail ${reportName}`, formatMetaData(reportMeta))
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX, exportToDOCX, exportDetailToDOCX }

282
src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts Normal file
View File

@ -0,0 +1,282 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = `<tr>`;
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += `</tr>`;
tbody += column;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th align="center" rowspan="2">Nama Unit</th>
<th align="center" rowspan="2">Total</th>
<th align="center" rowspan="2">SELESAI</th>
<th align="center" rowspan="2">%</th>
<th align="center" rowspan="2">IN PROSES</th>
<th align="center" rowspan="2">%</th>
<th align="center" colspan="5">DISPATCHING TIME</th>
<th align="center" colspan="5">RESPONSE TIME</th>
<th align="center" colspan="5">RECOVERY TIME</th>
</tr>
<tr>
<th align="center">RATA-RATA</th>
<th align="center">MAX</th>
<th align="center">MIN</th>
<th align="center">>SLA</th>
<th align="center"><SLA</th>
<th align="center">RATA-RATA</th>
<th align="center">MAX</th>
<th align="center">MIN</th>
<th align="center">>SLA</th>
<th align="center"><SLA</th>
<th align="center">RATA-RATA</th>
<th align="center">MAX</th>
<th align="center">MIN</th>
<th align="center">>SLA</th>
<th align="center"><SLA</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = '';
rawData.map((item: any, i: any) => {
cr += `<tr>`;
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td></td>`;
cr += `<td></td>`;
cr += `<td>${item.jarak_closing}</td>`;
cr += `<td>${item.dispatch_oleh}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.pembuat_laporan}</td>`;
cr += `<td>${item.diselesaikan_oleh}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.kode_gangguan}</td>`;
cr += `<td>${item.jenis_gangguan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `</tr>`;
})
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>Posko</th>
<th>No Lapor</th>
<th>Tgl/Jam Lapor</th>
<th>Tgl/Jam Datang</th>
<th>Tgl/Jam Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Durasi Penugasan Regu</th>
<th>Durasi Perjalanan Regu</th>
<th>Jarak Closing (m)</th>
<th>Dispatch Oleh</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Sumber Lapor</th>
<th>Diselesaikan Oleh</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>Kode Gangguan</th>
<th>Jenis Gangguan</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>${tbody}</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

251
src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts Executable file
View File

@ -0,0 +1,251 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
for (let index = 0; index < 5; index++) {
const element = rawData[index];
var column = `<tr>`;
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += `</tr>`;
tbody += column;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th align="center">No</th>
<th align="center">Nama Up3</th>
<th align="center">Nama Posko</th>
<th align="center">Posko In</th>
<th align="center">Posko Out</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.media}</td>`;
cr += '<td></td>';
cr += '<td></td>';
cr += '<td></td>';
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Sumber Lapor</th>
<th>Nama Petugas</th>
<th>Posko Asal</th>
<th>Posko Tujuan</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

280
src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts Normal file
View File

@ -0,0 +1,280 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
console.log(rawData)
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = `<tr>`;
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content.content === 'GRAND TOTAL') {
styleTotal = 'style="background-color: #c0c0c0"'
};
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += `</tr>`;
tbody += column;
}
const header =
[
{
content: 'No',
rowSpan: 2
},
{
content: 'Nama Media',
rowSpan: 2
},
{
content: 'Tanggal',
colSpan: 31
},
{
content: 'Total',
rowSpan: 2
}
];
var columnHeader = '';
for (let i = 0; i < header.length; i++) {
const content = header[i];
const rowSpan = content.rowSpan ? `rowspan="${content.rowSpan}"` : '';
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
columnHeader += `<th ${rowSpan} ${colSpan} align="center">${content.content}</th>`;
}
var columnTanggal = '';
for (let index = 1; index <= 31; index++) {
columnTanggal += `<td>${index}</td>`;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
${columnHeader}
</tr>
<tr>
${columnTanggal}
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tidakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

279
src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts Normal file
View File

@ -0,0 +1,279 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
console.log(rawData)
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = `<tr>`;
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content.content === 'GRAND TOTAL') {
styleTotal = 'style="background-color: #c0c0c0"'
};
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += `</tr>`;
tbody += column;
}
const header =
[
{
content: 'No',
rowSpan: 2
},
{
content: 'Nama Unit',
rowSpan: 2
},
{
content: 'Bulan',
colSpan: 12
}
];
const bulan = [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember'
];
var columnHeader = '';
for (let i = 0; i < header.length; i++) {
const content = header[i];
const rowSpan = content.rowSpan ? `rowspan="${content.rowSpan}"` : '';
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
columnHeader += `<th ${rowSpan} ${colSpan} align="center">${content.content}</th>`;
}
var columnBulan = '';
for (let index = 0; index < 12; index++) {
columnBulan += `<td>${bulan[index]}</td>`;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
${columnHeader}
</tr>
<tr>
${columnBulan}
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.tgl_catat}</td>`;
cr += `<td>${item.tgl_pekerjaan}</td>`;
cr += `<td>${item.tgl_nyala}</td>`;
cr += `<td>${item.durasi_pencatatan}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.keterangan_cleansing}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Catat</th>
<th>Tgl Pekerjaan</th>
<th>Tgl Nyala</th>
<th>Durasi Pencatatan</th>
<th>Durasi Recovery Time</th>
<th>Keterangan Cleansing</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

315
src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts Normal file
View File

@ -0,0 +1,315 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 5px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
var column = '';
for (let index = 0; index < rawData.length; index++) {
const content = rawData[index];
column += '<tr>';
for (let i = 0; i < content.length; i++) {
const item = content[i];
const colSpan = item ?
item.colSpan ? `colspan="${item.colSpan}"`
: '' : '';
i === 0 ?
column += `<td ${colSpan} align="left">${item.content}</td>`
: column += `<td>${item}</td>`;
}
column += `</tr>`;
}
tbody += column;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tbody><tr>
<td height="20" align="center" valign="top"><b><font face="Cambria">NO</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Nama Regu</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Kode Regu</font></b></td>
<td colspan="5" align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
<td colspan="16" align="center" valign="top"><b><font face="Cambria">Penyelesaian</font></b></td>
</tr>
<tr>
<td rowspan="5" height="100" align="center" valign="top"><b><font face="Cambria">a</font></b></td>
<td rowspan="5" align="center" valign="top"><b><font face="Cambria">b</font></b></td>
<td rowspan="5" align="center" valign="top"><b><font face="Cambria">c</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Sudah Selesai</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Belum Selesai</font></b></td>
<td colspan="8" align="center" valign="top"><b><font face="Cambria">Mobile</font></b></td>
<td colspan="8" align="center" valign="top"><b><font face="Cambria">Non Mobile</font></b></td>
</tr>
<tr>
<td rowspan="4" align="center" valign="top"><b><font face="Cambria">d=(e+g)</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Jml</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Jml</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
<td colspan="4" align="center" valign="top"><b><font face="Cambria">Non Marking</font></b></td>
<td colspan="4" align="center" valign="top"><b><font face="Cambria">Marking</font></b></td>
<td colspan="4" align="center" valign="top"><b><font face="Cambria">Non Marking</font></b></td>
<td colspan="4" align="center" valign="top"><b><font face="Cambria">Marking</font></b></td>
</tr>
<tr>
<td rowspan="3" align="center" valign="top"><b><font face="Cambria">e</font></b></td>
<td rowspan="3" align="center" valign="top"><b><font face="Cambria">f=(e/d)*100</font></b></td>
<td rowspan="3" align="center" valign="top"><b><font face="Cambria">g</font></b></td>
<td rowspan="3" align="center" valign="top"><b><font face="Cambria">h=(g/d)*100</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Total</font></b></td>
<td colspan="2" align="center" valign="top"><b><font face="Cambria">Waktu Rata-Rata</font></b></td>
</tr>
<tr>
<td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Laporan</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">%</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Response</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">Recovery</font></b></td>
</tr>
<tr>
<td align="center" valign="top"><b><font face="Cambria">i</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">j=(i/d)*100</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">k</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">l</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">m</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">n=(m/d)*100</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">o</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">p</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">q</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">r=(q/d)*100</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">s</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">t</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">u</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">v=(u/d)*100</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">w</font></b></td>
<td align="center" valign="top"><b><font face="Cambria">x</font></b></td>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Catat</th>
<th>Tgl Pekerjaan</th>
<th>Tgl Nyala</th>
<th>Durasi Pencatatan</th>
<th>Durasi Recovery Time</th>
<th>Keterangan Cleansing</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

280
src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts Normal file
View File

@ -0,0 +1,280 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
console.log(rawData)
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Kode</th>
<th rowspan="3" style="width: 25%">Sub Kelompok (Equipment)</th>
<th colspan="5">Laporan</th>
<th colspan="6">Response Time</th>
<th colspan="6">Recovery Time</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="2">Belum Selesai</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td> ${item.no_laporan}</td>`;
cr += `<td> ${item.waktu_lapor}</td>`;
cr += `<td> ${item.waktu_response}</td>`;
cr += `<td> ${item.waktu_recovery}</td>`;
cr += `<td> ${item.durasi_response_time}</td>`;
cr += `<td> ${item.durasi_recovery_time}</td>`;
cr += `<td> ${item.status_akhir}</td>`;
cr += `<td> ${item.referensi_marking}</td>`;
cr += `<td> ${item.id_pelnomormeter}</td>`;
cr += `<td> ${item.nama_pelapor}</td>`;
cr += `<td> ${item.alamat_pelapor}</td>`;
cr += `<td> ${item.no_telp_pelapor}</td>`;
cr += `<td> ${item.keterangan_pelapor}</td>`;
cr += `<td> ${item.nama_posko}</td>`;
cr += `<td> ${item.tindakan}</td>`;
cr += `<td> ${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

280
src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts Normal file
View File

@ -0,0 +1,280 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
console.log(rawData)
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content.content === 'TOTAL') {
styleTotal = 'style="background-color: #c0c0c0"'
};
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Kode</th>
<th rowspan="3" style="width: 25%">Sub Kelompok (Equipment)</th>
<th colspan="5">Laporan</th>
<th colspan="6">Response Time</th>
<th colspan="6">Recovery Time</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="2">Belum Selesai</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td> ${item.no_laporan}</td>`;
cr += `<td> ${item.waktu_lapor}</td>`;
cr += `<td> ${item.waktu_response}</td>`;
cr += `<td> ${item.waktu_recovery}</td>`;
cr += `<td> ${item.durasi_response_time}</td>`;
cr += `<td> ${item.durasi_recovery_time}</td>`;
cr += `<td> ${item.status_akhir}</td>`;
cr += `<td> ${item.referensi_marking}</td>`;
cr += `<td> ${item.id_pelnomormeter}</td>`;
cr += `<td> ${item.nama_pelapor}</td>`;
cr += `<td> ${item.alamat_pelapor}</td>`;
cr += `<td> ${item.no_telp_pelapor}</td>`;
cr += `<td> ${item.keterangan_pelapor}</td>`;
cr += `<td> ${item.nama_posko}</td>`;
cr += `<td> ${item.tindakan}</td>`;
cr += `<td> ${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

293
src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts Normal file
View File

@ -0,0 +1,293 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
console.log(rawData)
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Nama Unit</th>
<th colspan="12">Bulan</th>
</tr>
<tr>
<th>Januari</th>
<th>Februari</th>
<th>Maret</th>
<th>April</th>
<th>Mei</th>
<th>Juni</th>
<th>Juli</th>
<th>Agustus</th>
<th>September</th>
<th>Oktober</th>
<th>November</th>
<th>Desember</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.tgl_lapor}</td>`;
cr += `<td>${item.tgl_lapor_sblm}</td>`;
cr += `<td>${item.tgl_lapor_sdh}</td>`;
cr += `<td>${item.tgl_penugasan_sblm}</td>`;
cr += `<td>${item.tgl_penugasan_sdh}</td>`;
cr += `<td>${item.tgl_perjalanan_sblm}</td>`;
cr += `<td>${item.tgl_perjalanan_sdh}</td>`;
cr += `<td>${item.tgl_pengerjaan_sblm}</td>`;
cr += `<td>${item.tgl_pengerjaan_sdh}</td>`;
cr += `<td>${item.tgl_nyala_sementara_sblm}</td>`;
cr += `<td>${item.tgl_nyala_sementara_sdh}</td>`;
cr += `<td>${item.tgl_nyala_sblm}</td>`;
cr += `<td>${item.tgl_nyala_sdh}</td>`;
cr += `<td>${item.tgl_selesai_sblm}</td>`;
cr += `<td>${item.tgl_selesai_sdh}</td>`;
cr += `<td>${item.durasi_response_time_sblm}</td>`;
cr += `<td>${item.durasi_response_time_sdh}</td>`;
cr += `<td>${item.durasi_recovery_time_sdh}</td>`;
cr += `<td>${item.kelompok_sblm}</td>`;
cr += `<td>${item.kelompok_sdh}</td>`;
cr += `<td>${item.sub_kelompok_sblm}</td>`;
cr += `<td>${item.sub_kelompok_sdh}</td>`;
cr += `<td>${item.fasilitas_id_sblm}</td>`;
cr += `<td>${item.fasilitas_id_sdh}</td>`;
cr += `<td>${item.sub_fasilitas_id_sblm}</td>`;
cr += `<td>${item.sub_fasilitas_id_sdh}</td>`;
cr += `<td>${item.equipment_id_sblm}</td>`;
cr += `<td>${item.equipment_id_sdh}</td>`;
cr += `<td>${item.event_damage_sblm}</td>`;
cr += `<td>${item.event_damage_sdh}</td>`;
cr += `<td>${item.cause_id_sblm}</td>`;
cr += `<td>${item.cause_id_sdh}</td>`;
cr += `<td>${item.cause_group_id_sblm}</td>`;
cr += `<td>${item.cause_group_id_sdh}</td>`;
cr += `<td>${item.weather_id_sblm}</td>`;
cr += `<td>${item.weather_id_sdh}</td>`;
cr += `<td>${item.group_koreksi}</td>`;
cr += `<td>${item.alasan}</td>`;
cr += `<td>${item.idpel_no_meter}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

278
src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts Normal file
View File

@ -0,0 +1,278 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var columnHeader = `<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Posko</th>
<th colspan="5">Laporan</th>
<th colspan="6">Response Time</th>
<th colspan="6">Recovery Time</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="2">Belum Selesai</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
</tr>
</thead>
`;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
${columnHeader}
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

281
src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts Normal file
View File

@ -0,0 +1,281 @@
import { Column } from "jspdf-autotable";
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var columnHeader = `<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Kode</th>
<th rowspan="3">Nama Regu</th>
<th colspan="5">Laporan</th>
<th colspan="6">Response Time</th>
<th colspan="6">Recovery Time</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="2">Belum Selesai</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
</tr>
</thead>`;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
${columnHeader}
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var columnHeader = `<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>`;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
${columnHeader}
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

278
src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts Normal file
View File

@ -0,0 +1,278 @@
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Tanggal Lapor</th>
<th colspan="5">Laporan</th>
<th colspan="6">Response Time</th>
<th colspan="6">Recovery Time</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="2">Belum Selesai</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
<th colspan="4">Menit</th>
<th colspan="2">Laporan</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
<th>Total</th>
<th>Rata-Rata</th>
<th>Max</th>
<th>Min</th>
<th>>Sla</th>
<th><Sla</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.id_pelnomormeter}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

276
src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts Normal file
View File

@ -0,0 +1,276 @@
import { numberToStars } from "@/report/utils/rating";
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var columnHeader = `<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Kode</th>
<th rowspan="3">Nama Regu</th>
<th colspan="5">Laporan</th>
<th colspan="7">Rating</th>
<th colspan="2">Non Rating</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Belum Selesai</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="7">Bintang</th>
<th rowspan="2">Jml</th>
<th rowspan="2">%</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>Index</th>
</tr>
</thead>
`;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
${columnHeader}
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${numberToStars(item.nilai_rating)}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<th>No</th>
<th>No Laporan</th>
<th>Rating</th>
<th>Tgl Lapor</th>
<th>Tgl Datang</th>
<th>Tgl Nyala</th>
<th>Durasi Response Time</th>
<th>Durasi Recovery Time</th>
<th>Status</th>
<th>Referensi Marking</th>
<th>IDPEL/NO METER</th>
<th>Nama Pelapor</th>
<th>Alamat Pelapor</th>
<th>No Telp Pelapor</th>
<th>Keterangan Pelapor</th>
<th>Posko</th>
<th>Tindakan</th>
<th>Penyebab</th>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

276
src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts Normal file
View File

@ -0,0 +1,276 @@
import { numberToStars } from "@/report/utils/rating";
const company = "PT. PLN (Persero)";
const exportToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = '';
for (let index = 0; index < rawData.length; index++) {
const element = rawData[index];
var column = '<tr>';
let styleTotal = '';
for (let i = 0; i < element.length; i++) {
const content = element[i];
const colSpan = content?.colSpan !== undefined ? `colspan="${content.colSpan}"` : ''
if (content && (content.content === 'TOTAL' || content.content === 'GRAND TOTAL')) {
styleTotal = 'style="background-color: #c0c0c0; font-weight: bold;"'
}
i === 0 ?
column += `<td ${styleTotal} ${colSpan} align="left">${content.content}</td>`
: column += `<td ${styleTotal}>${content}</td>`;
}
column += '</tr>';
tbody += column;
}
var columnHeader = `<thead>
<tr>
<th rowspan="3">No</th>
<th rowspan="3">Kode</th>
<th rowspan="3">Nama Regu</th>
<th colspan="5">Laporan</th>
<th colspan="7">Rating</th>
<th colspan="2">Non Rating</th>
</tr>
<tr>
<th rowspan="2">Total</th>
<th colspan="2">Belum Selesai</th>
<th colspan="2">Sudah Selesai</th>
<th colspan="7">Bintang</th>
<th rowspan="2">Jml</th>
<th rowspan="2">%</th>
</tr>
<tr>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>%</th>
<th>Jml</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>Index</th>
</tr>
</thead>
`;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
${columnHeader}
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
const exportDetailToWord = (reportMeta: any, rawData: any, filename: any, periode: any) => {
var preHtml = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>${filename}</title>
<style type="text/css" media="print">
@page Section1 {
size:841.95pt 21.0cm;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
}
@page{
size: landscape;
font-size: 5px;
}
div.Section1 {
page:Section1;
}
table.main {
border-collapse: collapse;
width: 100%;
text-transform: uppercase;
font-size: 8px;
}
table.main thead tr {
background-color: #c0c0c0;
}
</style>
</head><body>
<div class="Section1">
`;
var tbody = ``;
var cr = ``;
rawData.map((item: any, i: any) => {
cr += '<tr>';
cr += `<td>${i + 1}</td>`;
cr += `<td>${item.no_laporan}</td>`;
cr += `<td>${numberToStars(item.nilai_rating)}</td>`;
cr += `<td>${item.waktu_lapor}</td>`;
cr += `<td>${item.waktu_response}</td>`;
cr += `<td>${item.waktu_recovery}</td>`;
cr += `<td>${item.durasi_response_time}</td>`;
cr += `<td>${item.durasi_recovery_time}</td>`;
cr += `<td>${item.status_akhir}</td>`;
cr += `<td>${item.referensi_marking}</td>`;
cr += `<td>${item.idpel_nometer}</td>`;
cr += `<td>${item.nama_pelapor}</td>`;
cr += `<td>${item.alamat_pelapor}</td>`;
cr += `<td>${item.no_telp_pelapor}</td>`;
cr += `<td>${item.keterangan_pelapor}</td>`;
cr += `<td>${item.nama_posko}</td>`;
cr += `<td>${item.tindakan}</td>`;
cr += `<td>${item.penyebab}</td>`;
cr += '</tr>';
});
tbody += cr;
var body = `
<table border=0 style="border:none">
<tr>
<td colspan="3"> ${company.toUpperCase()}</td>
</tr>
<tr>
<td> Unit Induk Distribusi/Wilayah </td>
<td>:</td>
<td> ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()}</td>
<tr>
<td> Unit Pelaksanaan Pelayanan Pelanggan</td>
<td>:</td>
<td> ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()}</td>
</tr>
<tr>
<td> Posko</td>
<td>:</td>
<td> ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()}</td>
</tr>
</table>
<center><h6>${filename.toUpperCase()}</h6></center>
<center><h6>Periode : ${periode.dateFromFormat} s/d ${periode.dateToFormat} (${periode.dayTo})<h6></center>
<table class="main">
<thead>
<tr>
<td>No</td>
<td>No Laporan</td>
<td>Rating</td>
<td>Tgl Lapor</td>
<td>Tgl Datang</td>
<td>Tgl Nyala</td>
<td>Durasi Response Time</td>
<td>Durasi Recovery Time</td>
<td>Status</td>
<td>Referensi Marking</td>
<td>IDPEL/NO METER</td>
<td>Nama Pelapor</td>
<td>Alamat Pelapor</td>
<td>No Telp Pelapor</td>
<td>Keterangan Pelapor</td>
<td>Posko</td>
<td>Tindakan</td>
<td>Penyebab</td>
</tr>
</thead>
<tbody>
${tbody}
</tbody>
</table>
`
var postHtml = "</div></body></html>";
var html = preHtml + body + postHtml;
var url =
"data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html);
filename = filename ? filename + ".doc" : "document.doc";
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.href = url;
downloadLink.download = filename;
downloadLink.click();
document.body.removeChild(downloadLink);
}
export { exportToWord, exportDetailToWord }

1
src/report/Keluhan/Rekap/RKeluhan_PerTanggal.ts
View File

@ -24,7 +24,6 @@ import { exportToWord, exportDetailToWord } from './doc/RKeluhan_PerTanggal'
const reportName = 'Rekapitulasi Keluhan Per Tanggal'
const fontSize = 5
const detailFontSize = 3
const groupingData = (data: any) => {
const groupedData: any = {}