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

DOCUMENT rekapitulasi

Browse Source
This commit is contained in:
Eko Haryadi 2024-04-05 17:01:31 +07:00
parent db757a65bb
commit 444c59d0b5
44 changed files with 6420 additions and 6572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1989
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
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"

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

@ -60,476 +60,139 @@
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_dispatch"
data-type="number"
caption="Rata-Rata"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatDPT"
/>
<DxColumn
:visible="false"
:width="150"
alignment="center"
data-field="count_durasi_dispatch"
data-type="number"
caption="Jumlah Dispatch"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:visible="false"
:width="150"
alignment="center"
data-type="number"
caption="Total Durasi Dispatch"
name="total_durasi_dispatch"
:allow-resizing="false"
css-class="custom-table-column"
:calculate-display-value="
(rowData: any) =>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatDPT" />
<DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_dispatch" data-type="number"
caption="Jumlah Dispatch" :allow-resizing="false" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Dispatch"
name="total_durasi_dispatch" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
"
:calculate-cell-value="
(rowData: any) =>
" :calculate-cell-value="(rowData: any) =>
parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_dispatch"
data-type="number"
caption="Max"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_dispatch"
data-type="number"
caption="Min"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_dispatch"
data-type="number"
caption=">SLA"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_dispatch"
data-type="number"
caption="≤SLA"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_response"
data-type="number"
caption="Rata-Rata"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatRPT"
/>
<DxColumn
:visible="false"
:width="150"
alignment="center"
data-field="count_durasi_response"
data-type="number"
caption="Jumlah Response"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:visible="false"
:width="150"
alignment="center"
data-type="number"
caption="Total Durasi Response"
name="total_durasi_response"
:allow-resizing="false"
css-class="custom-table-column"
:calculate-display-value="
(rowData: any) =>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRPT" />
<DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_response" data-type="number"
caption="Jumlah Response" :allow-resizing="false" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Response"
name="total_durasi_response" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
"
:calculate-cell-value="
(rowData: any) =>
" :calculate-cell-value="(rowData: any) =>
parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_response"
data-type="number"
caption="Max"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_response"
data-type="number"
caption="Min"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_response"
data-type="number"
caption=">SLA"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_response"
data-type="number"
caption="≤SLA"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="avg_durasi_recovery"
data-type="number"
caption="Rata-Rata"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatRCT"
/>
<DxColumn
:visible="false"
:width="150"
alignment="center"
data-field="count_durasi_recovery"
data-type="number"
caption="Jumlah Recovery"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:visible="false"
:width="150"
alignment="center"
data-type="number"
caption="Total Durasi Recovery"
name="total_durasi_recovery"
:allow-resizing="false"
css-class="custom-table-column"
:calculate-display-value="
(rowData: any) =>
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRCT" />
<DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_recovery" data-type="number"
caption="Jumlah Recovery" :allow-resizing="false" css-class="custom-table-column"
cell-template="formatNumber" />
<DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Recovery"
name="total_durasi_recovery" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
"
:calculate-cell-value="
(rowData: any) =>
" :calculate-cell-value="(rowData: any) =>
parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="max_durasi_recovery"
data-type="number"
caption="Max"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="min_durasi_recovery"
data-type="number"
caption="Min"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_diatas_sla_recovery"
data-type="number"
caption=">SLA"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
<DxColumn
:width="150"
alignment="center"
data-field="total_dibawah_sla_recovery"
data-type="number"
caption="≤SLA"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatNumber"
/>
" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
</DxColumn>
<DxSummary :calculate-custom-summary="calculateCustomSummary">
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total"
name="total"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_selesai"
name="total_selesai"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_selesai"
name="persen_selesai"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_inproses"
name="total_inproses"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="persen_inproses"
name="persen_inproses"
summary-type="custom"
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"
name="avg_durasi_dispatch"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_durasi_dispatch"
name="total_durasi_dispatch"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="count_durasi_dispatch"
name="count_durasi_dispatch"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" name="total"
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" name="total_selesai"
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" name="persen_selesai"
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" name="total_inproses"
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_inproses"
name="persen_inproses" summary-type="custom" 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"
name="avg_durasi_dispatch" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_dispatch"
name="total_durasi_dispatch" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_dispatch"
name="count_durasi_dispatch" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="max_durasi_dispatch"
summary-type="max"
css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="min_durasi_dispatch"
summary-type="min"
css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_diatas_sla_dispatch"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_dibawah_sla_dispatch"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="avg_durasi_response"
name="avg_durasi_response"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_durasi_response"
name="total_durasi_response"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="count_durasi_response"
name="count_durasi_response"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="max_durasi_response"
summary-type="max"
css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="min_durasi_response"
summary-type="min"
css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_diatas_sla_response"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_dibawah_sla_response"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="avg_durasi_recovery"
name="avg_durasi_recovery"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_durasi_recovery"
name="total_durasi_recovery"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="count_durasi_recovery"
name="count_durasi_recovery"
summary-type="custom"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="max_durasi_recovery"
summary-type="max"
css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="min_durasi_recovery"
summary-type="min"
css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_diatas_sla_recovery"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem
:show-in-group-footer="false"
:align-by-column="true"
column="total_dibawah_sla_recovery"
summary-type="sum"
css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
summary-type="max" css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
summary-type="min" css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
name="avg_durasi_response" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_response"
name="total_durasi_response" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_response"
name="count_durasi_response" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
summary-type="max" css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
summary-type="min" css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
name="avg_durasi_recovery" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_recovery"
name="total_durasi_recovery" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_recovery"
name="count_durasi_recovery" summary-type="custom" css-class="!text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
summary-type="max" css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
summary-type="min" css-class="!text-center"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
<template #formatText="{ data }">
@ -606,14 +269,8 @@
@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" />
@ -859,7 +516,9 @@ import {
exportToPDF,
exportToXLSX,
exportDetailToPDF,
exportDetailToXLSX
exportDetailToXLSX,
exportToDOCX,
exportDetailToDOCX
} from '@/report/Gangguan/Rekap/RGangguan_ALL'
import { getDataRowGroup } from '@/utils/helper'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
@ -1246,11 +905,13 @@ const showDetail = () => {
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta.value, data.value)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
exportToDOCX(reportMeta.value, data.value)
}
}
@ -1260,6 +921,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_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 }">
@ -160,192 +86,59 @@
</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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

383
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)">
@ -105,208 +56,66 @@
</template>
<DxSummary>
<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)"
/>
<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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

356
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 }">
@ -166,142 +67,45 @@
</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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_pencatatan)
? formatWaktu(dataSubSelected?.durasi_pencatatan)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

620
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>
@ -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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

446
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 }">
@ -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)
}
}

714
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>
@ -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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

1020
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)
}
}

713
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>
@ -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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

513
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 }">
@ -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)
<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"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" 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)
}
}

708
src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
View File

@ -1,378 +1,127 @@
<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">
<Type13 @update:filters="(value) => (filters = value)" />
</Filters>
<div>
<DxDataGrid
ref="dataGridRef"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
:data-source="data"
: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"
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :data-source="data"
: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
:width="50"
alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
caption="NO"
css-class="custom-table-column"
data-type="number"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
alignment="center"
data-field="tanggal_lapor"
caption="Tanggal Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="170"
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=""
caption="Seluruh Distribusi"
css-class="custom-table-column"
:group-index="0"
v-else
/>
<DxColumn :width="50" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
css-class="custom-table-column" data-type="number" cell-template="formatNumber" />
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="170" 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="" caption="Seluruh Distribusi"
css-class="custom-table-column" :group-index="0" v-else />
<DxColumn alignment="center" caption="Laporan" 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="formatNumberLaporanTotal"
/>
<DxColumn :width="150" 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="150"
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="150" 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="150"
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="150" 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="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_durasi_response"
data-type="number"
caption="Total"
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_durasi_response" data-type="number"
caption="Total" 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>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<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_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>
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
<DxColumn
:width="150"
alignment="center"
data-field="total_durasi_recovery"
data-type="number"
caption="Total"
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_durasi_recovery" data-type="number"
caption="Total" 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>
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
<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="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>
</DxColumn>
<DxSummary>
<DxTotalItem
summary-type="sum"
display-format="Total"
show-in-column="tanggal_lapor"
css-class="text-white !text-left"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total"
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="tanggal_lapor"
css-class="text-white !text-left" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_selesai" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="avg" display-format="{0}" column="persen_selesai" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_inproses" css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="avg" display-format="{0}" column="persen_inproses" css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_response"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="avg" display-format="{0}" column="avg_durasi_response"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="min" display-format="{0}" column="min_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_selesai"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxTotalItem summary-type="max" display-format="{0}" column="max_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="avg"
display-format="{0}"
column="persen_selesai"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_response"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_response"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_recovery"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="avg" display-format="{0}" column="avg_durasi_recovery"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="min" display-format="{0}" column="min_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_inproses"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxTotalItem summary-type="max" display-format="{0}" column="max_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="avg"
display-format="{0}"
column="persen_inproses"
css-class="text-white !text-right"
:customize-text="(e: any) => formatPercentage(e.value)"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="avg"
display-format="{0}"
column="avg_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="min"
display-format="{0}"
column="min_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="max"
display-format="{0}"
column="max_durasi_response"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_response"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="avg"
display-format="{0}"
column="avg_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="min"
display-format="{0}"
column="min_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="max"
display-format="{0}"
column="max_durasi_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_diatas_sla_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
<DxTotalItem
summary-type="sum"
display-format="{0}"
column="total_dibawah_sla_recovery"
css-class="text-white !text-right"
:customize-text="(e: any) => formatNumber(e.value)"
/>
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_recovery"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
<DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_recovery"
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
</DxSummary>
<template #formatTime="{ data }">
@ -441,189 +190,55 @@
</DxDataGrid>
</div>
<DetailDialog
:open="dialogDetail"
title="Rekapitulasi Keluhan Per Tanggal"
@on-close="closedialogDetail"
:full-width="true"
>
<DetailDialog :open="dialogDetail" title="Rekapitulasi Keluhan Per Tanggal" @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="waktu_lapor"
caption="Tgl Lapor"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_response"
caption="Dalam Proses Bidang"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="waktu_recovery"
caption="Selesai Bidang Unit"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="durasi_response_time"
caption="Durasi Response Time"
: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="status_akhir"
caption="Status"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="idpel_nometer"
caption="IDPEL/NO METER"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatTime"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_pelapor"
caption="Nama Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="alamat_pelapor"
caption="Alamat Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="no_telp_pelapor"
caption="No Tlp Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="200"
alignment="center"
data-field="keterangan_pelapor"
caption="Keterangan Pelapor"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="nama_ulp"
caption="Rayon"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="uraian"
caption="Uraian"
:allow-resizing="false"
css-class="custom-table-column"
cell-template="formatText"
/>
<DxColumn
:width="150"
alignment="center"
data-field="respon_pelanggan"
caption="Respon Pelanggan"
: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="waktu_lapor" caption="Tgl Lapor"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Dalam Proses Bidang"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Selesai Bidang Unit"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
: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="status_akhir" caption="Status" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Rayon" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="uraian" caption="Uraian" :allow-resizing="false"
css-class="custom-table-column" cell-template="formatText" />
<DxColumn :width="150" alignment="center" data-field="respon_pelanggan" caption="Respon Pelanggan"
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
<template #formatText="{ data }">
<p class="text-left cursor-pointer">
@ -660,46 +275,28 @@
<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">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
<InputText
:readonly="true"
:value="
parseInt(dataSubSelected?.durasi_response_time)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
? formatWaktu(dataSubSelected?.durasi_response_time)
: '-'
"
class-name="flex-1"
/>
" 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)
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
? formatWaktu(dataSubSelected?.durasi_recovery_time)
: '-'
"
class-name="flex-1"
/>
" class-name="flex-1" />
</div>
<div class="flex flex-row items-center justify-between w-full">
@ -719,30 +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"
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">
@ -752,22 +336,12 @@
<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">
<h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
<InputText
:readonly="true"
type="textarea"
:value="dataSubSelected?.respon_pelanggan"
class-name="flex-1"
/>
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.respon_pelanggan" class-name="flex-1" />
</div>
</div>
</div>
@ -777,6 +351,7 @@
</template>
<script setup lang="ts">
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
@ -950,6 +525,7 @@ const onExporting = (e: any) => {
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta.value, e)
} else {
}
}

21
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
@ -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,8 +643,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -652,8 +652,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -662,8 +661,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

20
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,8 +397,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -407,8 +406,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -417,8 +415,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

19
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,8 +400,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -409,8 +409,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -419,8 +418,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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}

19
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,8 +558,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -567,8 +567,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -577,8 +576,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

18
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'
@ -59,7 +60,7 @@ const formatData = (rawData: any) => {
total_recovery_time_kurang_sla: 0
}
for (const sub_kelompok of data) {
for (const sub_kelompok of Object.keys(data)) {
const total: any = {
total_laporan: 0,
total_laporan_sudah_selesai: 0,
@ -492,8 +493,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -502,8 +502,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -512,8 +511,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
4,
1,
`POSKO : ${
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
}`
)
@ -549,5 +547,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 }

18
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
@ -610,8 +611,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -620,8 +620,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -630,8 +629,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

19
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,8 +477,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -486,8 +486,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -496,8 +495,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

29
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
@ -599,8 +588,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -609,8 +597,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`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 }

33
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
@ -661,8 +651,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -671,8 +660,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -681,8 +669,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

19
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
@ -655,8 +656,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -665,8 +665,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -675,8 +674,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

16
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,8 +416,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -425,8 +425,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`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 }

18
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,8 +396,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -405,8 +405,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -415,8 +414,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
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 }

16
src/report/Keluhan/Rekap/RKeluhan_BerdasarMedia.ts
View File

@ -427,8 +427,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -437,8 +436,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -447,8 +445,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.ulp
`UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
? reportMeta.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`
@ -525,5 +522,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
const exportToDOCX = (reportMeta: any, rawData: any, filename: any, periode: any) => {
exportToDOCX(reportMeta, rawData, filename, periode)
}
const exportDetailToDOCX = (reportMeta: any, rawData: any, filename: any, periode: any) => {
exportDetailToDOCX(reportMeta, rawData, filename, periode)
}
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }

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

@ -19,11 +19,9 @@ import { Workbook } from 'exceljs'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { setHeaderStyle } from '@/report/utils/xlsx'
import { formatNumber, formatPercentage } from '@/utils/numbers'
const reportName = 'Rekapitulasi Keluhan Per Tanggal'
const fontSize = 5
const detailFontSize = 3
const groupingData = (data: any) => {
const groupedData: any = {}
@ -655,8 +653,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
2,
1,
`UNIT INDUK : ${
reportMeta.uid
`UNIT INDUK : ${reportMeta.uid
? reportMeta.uid.name.toUpperCase()
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
}`
@ -665,8 +662,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
3,
1,
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
reportMeta.up3
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
? reportMeta.up3.name.toUpperCase()
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
}`
@ -675,8 +671,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet,
4,
1,
`UNIT LAYANAN PELANGGAN : ${
reportMeta.ulp
`UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
? reportMeta.ulp.name.toUpperCase()
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
}`