DOCUMENT rekapitulasi
This commit is contained in:
Eko Haryadi
parent
db757a65bb
commit
444c59d0b5
1989
package-lock.json
generated
1989
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -46,6 +46,7 @@
|
|||||||
"qs": "^6.11.2",
|
"qs": "^6.11.2",
|
||||||
"uuid": "^9.0.1",
|
"uuid": "^9.0.1",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
|
"vue-html-to-paper": "^2.0.3",
|
||||||
"vue-router": "^4.2.2",
|
"vue-router": "^4.2.2",
|
||||||
"vue-tailwind-datepicker": "^1.6.1",
|
"vue-tailwind-datepicker": "^1.6.1",
|
||||||
"vue3-star-ratings": "^3.0.5"
|
"vue3-star-ratings": "^3.0.5"
|
||||||
|
|||||||
@ -60,476 +60,139 @@
|
|||||||
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
:allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
|
||||||
:width="150"
|
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatDPT" />
|
||||||
alignment="center"
|
<DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_dispatch" data-type="number"
|
||||||
data-field="avg_durasi_dispatch"
|
caption="Jumlah Dispatch" :allow-resizing="false" css-class="custom-table-column"
|
||||||
data-type="number"
|
cell-template="formatNumber" />
|
||||||
caption="Rata-Rata"
|
<DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Dispatch"
|
||||||
:allow-resizing="false"
|
name="total_durasi_dispatch" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
|
||||||
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)
|
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)
|
parseFloat(rowData.count_durasi_dispatch) * parseFloat(rowData.avg_durasi_dispatch)
|
||||||
"
|
" 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
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
|
||||||
:width="150"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
|
||||||
data-field="max_durasi_dispatch"
|
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
|
||||||
caption="Max"
|
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
: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>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
:width="150"
|
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRPT" />
|
||||||
alignment="center"
|
<DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_response" data-type="number"
|
||||||
data-field="avg_durasi_response"
|
caption="Jumlah Response" :allow-resizing="false" css-class="custom-table-column"
|
||||||
data-type="number"
|
cell-template="formatNumber" />
|
||||||
caption="Rata-Rata"
|
<DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Response"
|
||||||
:allow-resizing="false"
|
name="total_durasi_response" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
|
||||||
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)
|
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)
|
parseFloat(rowData.count_durasi_response) * parseFloat(rowData.avg_durasi_response)
|
||||||
"
|
" 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
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||||
:width="150"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
data-field="max_durasi_response"
|
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
caption="Max"
|
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
: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>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
:width="150"
|
caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" cell-template="formatRCT" />
|
||||||
alignment="center"
|
<DxColumn :visible="false" :width="150" alignment="center" data-field="count_durasi_recovery" data-type="number"
|
||||||
data-field="avg_durasi_recovery"
|
caption="Jumlah Recovery" :allow-resizing="false" css-class="custom-table-column"
|
||||||
data-type="number"
|
cell-template="formatNumber" />
|
||||||
caption="Rata-Rata"
|
<DxColumn :visible="false" :width="150" alignment="center" data-type="number" caption="Total Durasi Recovery"
|
||||||
:allow-resizing="false"
|
name="total_durasi_recovery" :allow-resizing="false" css-class="custom-table-column" :calculate-display-value="(rowData: any) =>
|
||||||
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)
|
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)
|
parseFloat(rowData.count_durasi_recovery) * parseFloat(rowData.avg_durasi_recovery)
|
||||||
"
|
" 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
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||||
:width="150"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
data-field="max_durasi_recovery"
|
caption=">SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
caption="Max"
|
caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
: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>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total" name="total"
|
||||||
:show-in-group-footer="false"
|
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
:align-by-column="true"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_selesai" name="total_selesai"
|
||||||
column="total"
|
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
name="total"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="persen_selesai" name="persen_selesai"
|
||||||
summary-type="custom"
|
summary-type="custom" css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_inproses" name="total_inproses"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
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"
|
||||||
<DxGroupItem
|
name="persen_inproses" summary-type="custom" css-class="!text-right"
|
||||||
:show-in-group-footer="false"
|
:customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
:align-by-column="true"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_dispatch"
|
||||||
column="total_selesai"
|
name="avg_durasi_dispatch" summary-type="custom" css-class="!text-right"
|
||||||
name="total_selesai"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="custom"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_dispatch"
|
||||||
css-class="!text-right"
|
name="total_durasi_dispatch" summary-type="custom" css-class="!text-right"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
/>
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_dispatch"
|
||||||
<DxGroupItem
|
name="count_durasi_dispatch" summary-type="custom" css-class="!text-right"
|
||||||
:show-in-group-footer="false"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
: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
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_dispatch"
|
||||||
:show-in-group-footer="false"
|
summary-type="max" css-class="!text-center"
|
||||||
:align-by-column="true"
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
column="max_durasi_dispatch"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
|
||||||
summary-type="max"
|
summary-type="min" css-class="!text-center"
|
||||||
css-class="!text-center"
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
: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
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
|
||||||
:show-in-group-footer="false"
|
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
:align-by-column="true"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
|
||||||
column="min_durasi_dispatch"
|
name="avg_durasi_response" summary-type="custom" css-class="!text-right"
|
||||||
summary-type="min"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="!text-center"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_response"
|
||||||
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
|
name="total_durasi_response" summary-type="custom" css-class="!text-right"
|
||||||
/>
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_response"
|
||||||
:show-in-group-footer="false"
|
name="count_durasi_response" summary-type="custom" css-class="!text-right"
|
||||||
:align-by-column="true"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
column="total_diatas_sla_dispatch"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
|
||||||
summary-type="sum"
|
summary-type="max" css-class="!text-center"
|
||||||
css-class="!text-right"
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_response"
|
||||||
/>
|
summary-type="min" css-class="!text-center"
|
||||||
<DxGroupItem
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
:show-in-group-footer="false"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_response"
|
||||||
:align-by-column="true"
|
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
column="total_dibawah_sla_dispatch"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_response"
|
||||||
summary-type="sum"
|
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_recovery"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
name="avg_durasi_recovery" summary-type="custom" css-class="!text-right"
|
||||||
/>
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_durasi_recovery"
|
||||||
:show-in-group-footer="false"
|
name="total_durasi_recovery" summary-type="custom" css-class="!text-right"
|
||||||
:align-by-column="true"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
column="avg_durasi_response"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="count_durasi_recovery"
|
||||||
name="avg_durasi_response"
|
name="count_durasi_recovery" summary-type="custom" css-class="!text-right"
|
||||||
summary-type="custom"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_recovery"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
summary-type="max" css-class="!text-center"
|
||||||
/>
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_recovery"
|
||||||
:show-in-group-footer="false"
|
summary-type="min" css-class="!text-center"
|
||||||
:align-by-column="true"
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
column="total_durasi_response"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_recovery"
|
||||||
name="total_durasi_response"
|
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="custom"
|
<DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_recovery"
|
||||||
css-class="!text-right"
|
summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
: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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
@ -606,14 +269,8 @@
|
|||||||
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<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" />
|
||||||
@ -859,7 +516,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_ALL'
|
} from '@/report/Gangguan/Rekap/RGangguan_ALL'
|
||||||
import { getDataRowGroup } from '@/utils/helper'
|
import { getDataRowGroup } from '@/utils/helper'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
@ -1246,11 +905,13 @@ const showDetail = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
|
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
exportToPDF(reportMeta.value, data.value)
|
exportToPDF(reportMeta.value, data.value)
|
||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1260,6 +921,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,31 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
|
||||||
@reset-form="data = []"
|
@run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
|
||||||
:report-button="true"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
: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" />
|
<DxGrouping expand-mode="rowClick" />
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
@ -33,87 +16,30 @@
|
|||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="number" caption="No"
|
||||||
css-class="custom-table-column"
|
cell-template="formatNumber" />
|
||||||
:width="50"
|
<DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-field="number"
|
<DxColumn alignment="center" :min-width="180" data-field="nama_uid" caption="Nama UID"
|
||||||
caption="No"
|
css-class="custom-table-column" :group-index="0" />
|
||||||
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
|
<DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
:min-width="180"
|
<DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
|
||||||
data-field="nama_posko"
|
cell-template="formatNumberPoskoIn" />
|
||||||
caption="Nama Posko"
|
<DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatNumberPoskoOut" />
|
||||||
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>
|
<DxSummary>
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left"
|
||||||
:show-in-group-footer="true"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
column="number"
|
<DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
|
||||||
display-format="Total"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="!text-left"
|
<DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
css-class="!text-right" :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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
@ -160,192 +86,59 @@
|
|||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Alih Posko" @on-close="closeDialog"
|
||||||
:open="dialogDetail"
|
:full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Datang"
|
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column"
|
||||||
/>
|
cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="" caption="Posko Asal" css-class="custom-table-column"
|
||||||
:width="150"
|
cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="" caption="Posko Tujuan" css-class="custom-table-column"
|
||||||
data-field="waktu_recovery"
|
cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -381,46 +174,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -440,29 +215,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -526,7 +289,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToXLSX,
|
exportDetailToXLSX,
|
||||||
exportDetailToPDF
|
exportDetailToPDF,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
|
} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -613,6 +378,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -622,6 +388,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,84 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)"
|
||||||
@reset-form="data = []"
|
@run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
|
||||||
:report-button="true"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||||
:data-source="data"
|
:word-wrap-enabled="true">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
:width="50"
|
data-field="no" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="formatText"
|
||||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" header-cell-template="title-header" />
|
||||||
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 alignment="center" caption="Tanggal" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
|
||||||
v-for="i in 31"
|
:caption="i" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
:width="100"
|
|
||||||
alignment="center"
|
|
||||||
:data-field="`tgl${i}`"
|
|
||||||
data-type="number"
|
|
||||||
:caption="i"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
|
||||||
:width="170"
|
cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total"
|
|
||||||
caption="Total"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
|
<p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
|
||||||
@ -105,208 +56,66 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxTotalItem
|
<DxTotalItem display-format="Total" show-in-column="media" css-class="text-white !text-l eft" />
|
||||||
display-format="Total"
|
<DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
|
||||||
show-in-column="media"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="text-white !text-l eft"
|
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
|
||||||
/>
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
<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>
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Berdasarkan Media" @on-close="closeDialog"
|
||||||
:open="dialogDetail"
|
:full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Datang"
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -342,46 +151,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -391,11 +182,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.referensi_marking"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -410,29 +197,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -485,7 +260,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
|
} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -576,6 +353,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -585,6 +363,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,149 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
@reset-form="data = []"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
:report-button="true"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
|
||||||
width="200"
|
cell-template="formatText" />
|
||||||
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" caption="Bulan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="month1" data-type="number" caption="Januari"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-field="month1"
|
<DxColumn alignment="center" data-field="month2" data-type="number" caption="Februari"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
caption="Januari"
|
<DxColumn alignment="center" data-field="month3" data-type="number" caption="Maret"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
cell-template="formatNumber"
|
<DxColumn alignment="center" data-field="month4" data-type="number" caption="April"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="month5" data-type="number" caption="Mei"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-field="month2"
|
<DxColumn alignment="center" data-field="month6" data-type="number" caption="Juni"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
caption="Februari"
|
<DxColumn alignment="center" data-field="month7" data-type="number" caption="Juli"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
cell-template="formatNumber"
|
<DxColumn alignment="center" data-field="month8" data-type="number" caption="Agustus"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="month9" data-type="number" caption="September"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-field="month3"
|
<DxColumn alignment="center" data-field="month10" data-type="number" caption="Oktober"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
caption="Maret"
|
<DxColumn alignment="center" data-field="month11" data-type="number" caption="November"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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="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>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
@ -166,142 +67,45 @@
|
|||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Data Detail Cleansing Transaksi TM" @on-close="closedialogDetail"
|
||||||
:open="dialogDetail"
|
:full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="tgl_catat" caption="Tgl Catat"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="tgl_pekerjaan" caption="Tgl Pekerjaan"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="tgl_nyala" caption="Tgl Nyala"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_pencatatan" caption="Durasi Pencatatan"
|
||||||
data-field="no_laporan"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="keterangan_cleansing" caption="Keterangan Cleansing"
|
||||||
/>
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" :allow-resizing="false"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
|
||||||
data-field="tgl_catat"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Catat"
|
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -348,37 +152,23 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Pencatatan:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Pencatatan:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_pencatatan)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_pencatatan)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_pencatatan)
|
? formatWaktu(dataSubSelected?.durasi_pencatatan)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan CLeansing:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan CLeansing:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_cleansing" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_cleansing"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -429,7 +219,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_CTTM'
|
} from '@/report/Gangguan/Rekap/RGangguan_CTTM'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -567,6 +359,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -576,6 +369,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,135 +1,60 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
|
||||||
@reset-form="data = []"
|
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
:report-button="true"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
|
||||||
:width="50"
|
<DxColumn :width="50" alignment="center"
|
||||||
alignment="center"
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
|
||||||
caption="NO"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
|
<DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="nama_regu" caption="b" css-class="custom-table-column"
|
||||||
:width="150"
|
cell-template="formatText" />
|
||||||
alignment="center"
|
|
||||||
data-field="nama_regu"
|
|
||||||
caption="b"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatText"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
|
<DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column"
|
||||||
:width="150"
|
cell-template="formatText" />
|
||||||
alignment="center"
|
|
||||||
data-field="kode_regu"
|
|
||||||
caption="c"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatText"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total" caption="d=(e+g)" css-class="custom-table-column"
|
||||||
:width="150"
|
cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total"
|
|
||||||
caption="d=(e+g)"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total_selesai"
|
|
||||||
caption="e"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
alignment="center"
|
|
||||||
data-field="persen_selesai"
|
|
||||||
caption="f=(e/d)*100"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatPercentage"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_inproses" caption="g"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total_inproses"
|
|
||||||
caption="g"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="persen_inproses" caption="h=(g/d)*100"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
alignment="center"
|
|
||||||
data-field="persen_inproses"
|
|
||||||
caption="h=(g/d)*100"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatPercentage"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -139,47 +64,23 @@
|
|||||||
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
|
<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="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_mobile_nonmarking" caption="i"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total_mobile_nonmarking"
|
|
||||||
caption="i"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="" caption="j=(i/d)*100"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
alignment="center"
|
|
||||||
data-field=""
|
|
||||||
caption="j=(i/d)*100"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatPercentage"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_mobile_nonmarking"
|
||||||
:width="150"
|
caption="k" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_response_time_mobile_nonmarking"
|
|
||||||
caption="k"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_mobile_nonmarking"
|
||||||
:width="150"
|
caption="l" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_recovery_time_mobile_nonmarking"
|
|
||||||
caption="l"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -187,47 +88,23 @@
|
|||||||
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" 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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_mobile_marking" caption="m"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total_mobile_marking"
|
|
||||||
caption="m"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="" caption="n=(m/d)*100"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
alignment="center"
|
|
||||||
data-field=""
|
|
||||||
caption="n=(m/d)*100"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatPercentage"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_mobile_marking"
|
||||||
:width="150"
|
caption="o" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_response_time_mobile_marking"
|
|
||||||
caption="o"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_mobile_marking"
|
||||||
:width="150"
|
caption="p" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_recovery_time_mobile_marking"
|
|
||||||
caption="p"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -237,47 +114,23 @@
|
|||||||
<DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
|
<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="Total" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_nonmobile_nonmarking" caption="q"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total_nonmobile_nonmarking"
|
|
||||||
caption="q"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="" caption="r=(q/d)*100"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
alignment="center"
|
|
||||||
data-field=""
|
|
||||||
caption="r=(q/d)*100"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatPercentage"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_nonmobile_nonmarking"
|
||||||
:width="150"
|
caption="s" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_response_time_nonmobile_nonmarking"
|
|
||||||
caption="s"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
|
||||||
:width="150"
|
caption="t" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
|
|
||||||
caption="t"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -285,47 +138,23 @@
|
|||||||
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Total" 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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_nonmobile_marking" caption="u"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="total_nonmobile_marking"
|
|
||||||
caption="u"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="%" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="" caption="v=(u/d)*100"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
alignment="center"
|
|
||||||
data-field=""
|
|
||||||
caption="v=(u/d)*100"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatPercentage"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response_time_nonmobile_marking"
|
||||||
:width="150"
|
caption="w" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_response_time_nonmobile_marking"
|
|
||||||
caption="w"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_time_nonmobile_marking"
|
||||||
:width="150"
|
caption="x" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
|
||||||
data-field="avg_durasi_recovery_time_nonmobile_marking"
|
|
||||||
caption="x"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="formatNumber"
|
|
||||||
/>
|
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -363,235 +192,74 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxTotalItem
|
<DxTotalItem display-format="TOTAL" show-in-column="nama_regu" css-class="text-white !text-right" />
|
||||||
display-format="TOTAL"
|
<DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
|
||||||
show-in-column="nama_regu"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="text-white !text-right"
|
<DxTotalItem column="total_selesai" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
|
||||||
/>
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
<DxTotalItem
|
<DxTotalItem column="total_mobile_marking" summary-type="sum" display-format="{0}"
|
||||||
column="total"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="sum"
|
<DxTotalItem column="total_mobile_nonmarking" summary-type="sum" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="text-white !text-right"
|
<DxTotalItem column="total_nonmobile_marking" summary-type="sum" display-format="{0}"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
/>
|
<DxTotalItem column="total_nonmobile_nonmarking" summary-type="sum" display-format="{0}"
|
||||||
<DxTotalItem
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
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>
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
|
||||||
:open="dialogDetail"
|
@on-close="closeDialog" :full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Datang"
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -627,46 +295,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -676,11 +326,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.referensi_marking"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -695,29 +341,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -770,7 +404,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
|
} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -853,6 +489,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -862,6 +499,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,396 +1,123 @@
|
|||||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
<!-- Rekapitulasi Gangguan/Jenis Gangguan -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)"
|
||||||
:report-button="true"
|
@run-report="() => exportToPDF(reportMeta, data, true)" class="mb-4">
|
||||||
@reset-form="data = []"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
<DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
|
<DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
|
||||||
:width="60"
|
cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
|
||||||
data-field="no"
|
cell-template="formatText" />
|
||||||
caption="NO"
|
<DxColumn :width="120" alignment="center" data-field="sub_kelompok" css-class="custom-table-column"
|
||||||
css-class="custom-table-column"
|
:group-index="0" caption="" cell-template="formatText" :calculate-group-value="(rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
|
||||||
cell-template="formatNumber"
|
" />
|
||||||
/>
|
<DxColumn :width="250" alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
|
||||||
<DxColumn
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
: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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
data-field="total_selesai"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
data-field="total_inproses"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
|
||||||
:width="120"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
data-field="total_durasi_response"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
:width="120"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
data-field="total_diatas_sla_response"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
||||||
:width="120"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
data-field="total_durasi_recovery"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
:width="120"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
data-field="total_diatas_sla_recovery"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total" summary-type="sum" display-format="{0}"
|
||||||
column="no"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
display-format="Total"
|
<DxGroupItem :show-in-group-footer="true" column="total_selesai" summary-type="sum" display-format="{0}"
|
||||||
css-class="!text-left"
|
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}"
|
||||||
<DxGroupItem
|
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total_inproses" summary-type="sum" display-format="{0}"
|
||||||
column="total"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="sum"
|
<DxGroupItem :show-in-group-footer="true" column="persen_inproses" summary-type="avg" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="true" column="total_durasi_response" summary-type="sum" display-format="{0}"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
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}"
|
||||||
<DxGroupItem
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="max_durasi_response" summary-type="max" display-format="{0}"
|
||||||
column="total_selesai"
|
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
summary-type="sum"
|
<DxGroupItem :show-in-group-footer="true" column="min_durasi_response" summary-type="min" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_response" summary-type="sum"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
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"
|
||||||
<DxGroupItem
|
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total_durasi_recovery" summary-type="sum" display-format="{0}"
|
||||||
column="persen_selesai"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="avg"
|
<DxGroupItem :show-in-group-footer="true" column="avg_durasi_recovery" summary-type="avg" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="true" column="max_durasi_recovery" summary-type="max" display-format="{0}"
|
||||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
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}"
|
||||||
<DxGroupItem
|
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_recovery" summary-type="sum"
|
||||||
column="total_inproses"
|
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="sum"
|
<DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_recovery" summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
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>
|
</DxSummary>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
@ -444,7 +171,7 @@ import {
|
|||||||
} from 'devextreme-vue/data-grid'
|
} from 'devextreme-vue/data-grid'
|
||||||
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
|
||||||
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
|
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 { apolloClient } from '@/utils/api/api.graphql'
|
||||||
import { provideApolloClient } from '@vue/apollo-composable'
|
import { provideApolloClient } from '@vue/apollo-composable'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
@ -476,6 +203,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,45 +1,24 @@
|
|||||||
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
<!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" :report-button="true" @run-report="() => exportToPDF(reportMeta, data, true)"
|
||||||
@reset-form="data = []"
|
@run-search="() => filterData(filters)" class="mb-4">
|
||||||
:report-button="true"
|
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||||
:data-source="data"
|
:word-wrap-enabled="true">
|
||||||
: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" />
|
<DxGrouping expand-mode="rowClick" />
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<!-- <DxColumn
|
<!-- <DxColumn
|
||||||
@ -49,201 +28,62 @@
|
|||||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
caption="No"
|
caption="No"
|
||||||
/> -->
|
/> -->
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
|
||||||
:width="120"
|
cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="id_fasilitas" caption="" css-class="custom-table-column"
|
||||||
data-field="kode"
|
cell-template="formatText" name="idFasilitasGroup" :group-index="0" />
|
||||||
caption="Kode"
|
<DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
|
||||||
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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
data-field="total_selesai"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
data-field="total_inproses"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
|
||||||
:width="120"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
data-field="total_durasi_response"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
:width="120"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
data-field="total_diatas_sla_response"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
||||||
:width="120"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
data-field="total_durasi_recovery"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
:width="120"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
data-field="total_diatas_sla_recovery"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@ -308,330 +148,96 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxGroupItem
|
<DxGroupItem :show-in-group-footer="true" column="Kode" display-format="Total" css-class="!text-left" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total" summary-type="sum" display-format="{0}"
|
||||||
column="Kode"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
display-format="Total"
|
<DxGroupItem :show-in-group-footer="true" column="total_selesai" summary-type="sum" display-format="{0}"
|
||||||
css-class="!text-left"
|
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}"
|
||||||
<DxGroupItem
|
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total_inproses" summary-type="sum" display-format="{0}"
|
||||||
column="total"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="sum"
|
<DxGroupItem :show-in-group-footer="true" column="persen_inproses" summary-type="avg" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="true" column="total_durasi_response" summary-type="sum" display-format="{0}"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
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}"
|
||||||
<DxGroupItem
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="max_durasi_response" summary-type="max" display-format="{0}"
|
||||||
column="total_selesai"
|
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
summary-type="sum"
|
<DxGroupItem :show-in-group-footer="true" column="min_durasi_response" summary-type="min" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_response" summary-type="sum"
|
||||||
:customize-text="(e: any) => formatNumber(e.value)"
|
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"
|
||||||
<DxGroupItem
|
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total_durasi_recovery" summary-type="sum" display-format="{0}"
|
||||||
column="persen_selesai"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="avg"
|
<DxGroupItem :show-in-group-footer="true" column="avg_durasi_recovery" summary-type="avg" display-format="{0}"
|
||||||
display-format="{0}"
|
css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="!text-right"
|
<DxGroupItem :show-in-group-footer="true" column="max_durasi_recovery" summary-type="max" display-format="{0}"
|
||||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
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}"
|
||||||
<DxGroupItem
|
css-class="!text-right" :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
:show-in-group-footer="true"
|
<DxGroupItem :show-in-group-footer="true" column="total_diatas_sla_recovery" summary-type="sum"
|
||||||
column="total_inproses"
|
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="sum"
|
<DxGroupItem :show-in-group-footer="true" column="total_dibawah_sla_recovery" summary-type="sum"
|
||||||
display-format="{0}"
|
display-format="{0}" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
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>
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004" @on-close="closeDialog"
|
||||||
:open="dialogDetail"
|
:full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="id_pelnomormeter" caption="IDPEL/NO METER"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Datang"
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -667,46 +273,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -716,20 +304,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.referensi_marking"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.id_pelnomormeter" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.id_pelnomormeter"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -739,29 +319,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -815,7 +383,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
|
} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -856,6 +426,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -865,6 +436,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -899,7 +899,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
|
} from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -993,6 +995,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1002,6 +1005,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -907,7 +907,10 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
|
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
|
} from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -1004,6 +1007,8 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1013,6 +1018,8 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,239 +1,81 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" @run-search="() => filterData(filters)"
|
||||||
@reset-form="data = []"
|
@run-report="() => exportToPDF(reportMeta, data, true)" :report-button="true" class="mb-4">
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
:report-button="true"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type9 @update:filters="(value) => (filters = value)" />
|
<Type9 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||||
:data-source="data"
|
:word-wrap-enabled="true">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
:width="50"
|
cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
|
||||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
group-index="0" v-if="isGroupBy" />
|
||||||
data-type="number"
|
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" />
|
||||||
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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
|
||||||
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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
data-field="total_selesai"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
:width="120"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
data-field="total_inproses"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
|
||||||
:width="120"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
data-field="total_durasi_response"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
:width="120"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
data-field="total_diatas_sla_response"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
||||||
:width="120"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
data-field="total_durasi_recovery"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
:width="120"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
data-field="total_diatas_sla_recovery"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@ -298,334 +140,101 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
<DxSummary :calculate-custom-summary="calculateCustomSummary">
|
||||||
<DxTotalItem
|
<DxTotalItem display-format="TOTAL" show-in-column="tanggal" css-class="text-white !text-left" />
|
||||||
display-format="TOTAL"
|
<DxTotalItem column="total" name="total" summary-type="custom" display-format="{0}"
|
||||||
show-in-column="tanggal"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="text-white !text-left"
|
<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
|
<DxTotalItem column="persen_selesai" name="persen_selesai" summary-type="custom" display-format="{0}"
|
||||||
column="total"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
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
|
<DxTotalItem column="total_inproses" name="total_inproses" summary-type="custom" display-format="{0}"
|
||||||
column="total_inproses"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
name="total_inproses"
|
<DxTotalItem column="persen_inproses" name="persen_inproses" summary-type="custom" display-format="{0}"
|
||||||
summary-type="custom"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
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
|
<DxTotalItem column="total_durasi_response" name="total_durasi_response" summary-type="sum" display-format="{0}"
|
||||||
column="total_durasi_response"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
name="total_durasi_response"
|
<DxTotalItem column="avg_durasi_response" name="avg_durasi_response" summary-type="avg" display-format="{0}"
|
||||||
summary-type="sum"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
display-format="{0}"
|
<DxTotalItem column="max_durasi_response" name="max_durasi_response" summary-type="max" display-format="{0}"
|
||||||
css-class="text-white !text-right"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
|
||||||
:customize-text="(e: any) => formatNumber(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="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
|
<DxTotalItem column="total_diatas_sla_response" name="total_diatas_sla_response" summary-type="sum"
|
||||||
column="total_diatas_sla_response"
|
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
name="total_diatas_sla_response"
|
<DxTotalItem column="total_dibawah_sla_response" name="total_dibawah_sla_response" summary-type="sum"
|
||||||
summary-type="sum"
|
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
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
|
<DxTotalItem column="total_durasi_recovery" name="total_durasi_recovery" summary-type="sum" display-format="{0}"
|
||||||
column="total_durasi_recovery"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
name="total_durasi_recovery"
|
<DxTotalItem column="avg_durasi_recovery" name="avg_durasi_recovery" summary-type="avg" display-format="{0}"
|
||||||
summary-type="sum"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
display-format="{0}"
|
<DxTotalItem column="max_durasi_recovery" name="max_durasi_recovery" summary-type="max" display-format="{0}"
|
||||||
css-class="text-white !text-right"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatWaktu(e.value)" />
|
||||||
:customize-text="(e: any) => formatNumber(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="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
|
<DxTotalItem column="total_diatas_sla_recovery" name="total_diatas_sla_recovery" summary-type="sum"
|
||||||
column="total_diatas_sla_recovery"
|
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
name="total_diatas_sla_recovery"
|
<DxTotalItem column="total_dibawah_sla_recovery" name="total_dibawah_sla_recovery" summary-type="sum"
|
||||||
summary-type="sum"
|
display-format="{0}" css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
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>
|
</DxSummary>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Detail Rekapitulasi Gangguan/Tanggal" @on-close="closeDialog"
|
||||||
:open="dialogDetail"
|
:full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="id_pelnomormeter" caption="IDPEL/NO METER"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Datang"
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -661,46 +270,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -710,20 +301,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.referensi_marking"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.id_pelnomormeter" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.id_pelnomormeter"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -733,29 +316,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -808,7 +379,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
|
} from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -906,6 +479,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -915,6 +489,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -660,7 +660,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
|
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -807,6 +809,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -816,6 +819,7 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,194 +1,70 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @reset-form="data = []" @run-report="() => exportToPDF(reportMeta, data, true)"
|
||||||
@reset-form="data = []"
|
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
:report-button="true"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type1 @update:filters="(value) => (filters = value)" />
|
<Type1 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="50" alignment="center" caption="NO" data-type="number"
|
||||||
:width="50"
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" css-class="custom-table-column"
|
||||||
alignment="center"
|
cell-template="formatNumber" />
|
||||||
caption="NO"
|
<DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
|
||||||
data-type="number"
|
cell-template="formatText" />
|
||||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
|
||||||
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" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
|
||||||
data-field="total_inproses"
|
<DxColumn alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
|
||||||
data-field="total_selesai"
|
<DxColumn alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="total_rating" data-type="number" caption="Jml"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-field="total_rating"
|
<DxColumn alignment="center" data-field="nilai_rating1" data-type="number" caption="1"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
caption="Jml"
|
<DxColumn alignment="center" data-field="nilai_rating2" data-type="number" caption="2"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
cell-template="formatNumber"
|
<DxColumn alignment="center" data-field="nilai_rating3" data-type="number" caption="3"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
<DxColumn
|
<DxColumn alignment="center" data-field="nilai_rating4" data-type="number" caption="4"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-field="nilai_rating1"
|
<DxColumn alignment="center" data-field="nilai_rating5" data-type="number" caption="5"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
caption="1"
|
<DxColumn alignment="center" data-field="indeks_rating" data-type="number" caption="Index"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
|
|
||||||
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_nonrating" data-type="number" caption="Jml"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_nonrating" data-type="number" caption="%"
|
||||||
data-field="total_nonrating"
|
css-class="custom-table-column" cell-template="formatPercentage" />
|
||||||
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>
|
</DxColumn>
|
||||||
|
|
||||||
<template #formatText="{ data }">
|
<template #formatText="{ data }">
|
||||||
@ -259,192 +135,58 @@
|
|||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Detail Rating Per Regu" @on-close="closeDialog" :full-width="true">
|
||||||
: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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="nilai_rating" caption="Rating"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatRating" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl Datang"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl Nyala"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
|
||||||
data-field="nilai_rating"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Rating"
|
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatRating"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tidakan"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -466,14 +208,8 @@
|
|||||||
|
|
||||||
<template #formatRating="{ data }">
|
<template #formatRating="{ data }">
|
||||||
<div class="flex justify-center cursor-pointer">
|
<div class="flex justify-center cursor-pointer">
|
||||||
<vue3starRatings
|
<vue3starRatings v-model="data.text" :starSize="20" starColor="#CCCC00" inactiveColor="#D1D5DB"
|
||||||
v-model="data.text"
|
:numberOfStars="5" :disableClick="true" />
|
||||||
:starSize="20"
|
|
||||||
starColor="#CCCC00"
|
|
||||||
inactiveColor="#D1D5DB"
|
|
||||||
:numberOfStars="5"
|
|
||||||
:disableClick="true"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
@ -488,17 +224,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.nilai_rating)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.nilai_rating)
|
|
||||||
? parseInt(dataSubSelected?.nilai_rating) > 0
|
? parseInt(dataSubSelected?.nilai_rating) > 0
|
||||||
? `${parseInt(dataSubSelected?.nilai_rating)} Bintang`
|
? `${parseInt(dataSubSelected?.nilai_rating)} Bintang`
|
||||||
: `Tidak Ada Bintang`
|
: `Tidak Ada Bintang`
|
||||||
: `Tidak Ada Bintang`
|
: `Tidak Ada Bintang`
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -508,46 +239,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -557,11 +270,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.referensi_marking" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.referensi_marking"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -576,29 +285,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -650,7 +347,9 @@ import {
|
|||||||
exportToPDF,
|
exportToPDF,
|
||||||
exportDetailToPDF,
|
exportDetailToPDF,
|
||||||
exportToXLSX,
|
exportToXLSX,
|
||||||
exportDetailToXLSX
|
exportDetailToXLSX,
|
||||||
|
exportToDOCX,
|
||||||
|
exportDetailToDOCX
|
||||||
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
|
} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
|
||||||
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
|
||||||
|
|
||||||
@ -750,6 +449,8 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportToDOCX(reportMeta.value, data.value)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -759,6 +460,8 @@ const onExportingDetail = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportDetailToXLSX(reportMeta.value, e)
|
exportDetailToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
exportDetailToDOCX(reportMeta.value, dataSub.value)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,378 +1,127 @@
|
|||||||
<template>
|
<template>
|
||||||
<Filters
|
<Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
|
||||||
@run-report="() => exportToPDF(reportMeta, data, true)"
|
@run-search="() => filterData(filters)" :report-button="true" class="mb-4">
|
||||||
@reset-form="data = []"
|
|
||||||
@run-search="() => filterData(filters)"
|
|
||||||
:report-button="true"
|
|
||||||
class="mb-4"
|
|
||||||
>
|
|
||||||
<Type13 @update:filters="(value) => (filters = value)" />
|
<Type13 @update:filters="(value) => (filters = value)" />
|
||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<DxDataGrid
|
<DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
|
||||||
ref="dataGridRef"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :data-source="data"
|
||||||
:allow-column-reordering="true"
|
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
|
||||||
class="max-h-[calc(100vh-140px)] mb-10"
|
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||||
:show-column-lines="true"
|
:word-wrap-enabled="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" />
|
<DxGrouping expand-mode="rowClick" />
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="50" alignment="center"
|
||||||
:width="50"
|
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
|
||||||
alignment="center"
|
css-class="custom-table-column" data-type="number" cell-template="formatNumber" />
|
||||||
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
|
||||||
caption="NO"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
|
||||||
data-type="number"
|
:group-index="0" v-if="isGroupBy" />
|
||||||
cell-template="formatNumber"
|
<DxColumn :width="170" alignment="center" data-field="" caption="Seluruh Distribusi"
|
||||||
/>
|
css-class="custom-table-column" :group-index="0" v-else />
|
||||||
<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 alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumberLaporanTotal" />
|
||||||
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 alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlSelesai" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
data-field="total_selesai"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
:width="150"
|
css-class="custom-table-column" cell-template="formatNumberLaporanJmlBelumSelesai" />
|
||||||
alignment="center"
|
<DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
data-field="total_inproses"
|
css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_durasi_response" data-type="number"
|
||||||
:width="150"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
data-field="total_durasi_response"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
:width="150"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
data-field="total_diatas_sla_response"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_durasi_recovery" data-type="number"
|
||||||
:width="150"
|
caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
data-field="total_durasi_recovery"
|
caption="Rata-Rata" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||||
caption="Total"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||||
cell-template="formatNumber"
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
/>
|
|
||||||
<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>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
:width="150"
|
caption=">SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
data-field="total_diatas_sla_recovery"
|
caption="≤SLA" css-class="custom-table-column" cell-template="formatNumber" />
|
||||||
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>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
<DxSummary>
|
<DxSummary>
|
||||||
<DxTotalItem
|
<DxTotalItem summary-type="sum" display-format="Total" show-in-column="tanggal_lapor"
|
||||||
summary-type="sum"
|
css-class="text-white !text-left" />
|
||||||
display-format="Total"
|
<DxTotalItem summary-type="sum" display-format="{0}" column="total" css-class="text-white !text-right"
|
||||||
show-in-column="tanggal_lapor"
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
css-class="text-white !text-left"
|
<DxTotalItem summary-type="sum" display-format="{0}" column="total_selesai" css-class="text-white !text-right"
|
||||||
/>
|
:customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
<DxTotalItem
|
<DxTotalItem summary-type="avg" display-format="{0}" column="persen_selesai" css-class="text-white !text-right"
|
||||||
summary-type="sum"
|
:customize-text="(e: any) => formatPercentage(e.value)" />
|
||||||
display-format="{0}"
|
<DxTotalItem summary-type="sum" display-format="{0}" column="total_inproses" css-class="text-white !text-right"
|
||||||
column="total"
|
: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"
|
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="max" display-format="{0}" column="max_durasi_response"
|
||||||
<DxTotalItem
|
|
||||||
summary-type="sum"
|
|
||||||
display-format="{0}"
|
|
||||||
column="total_selesai"
|
|
||||||
css-class="text-white !text-right"
|
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_response"
|
||||||
<DxTotalItem
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="avg"
|
<DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_response"
|
||||||
display-format="{0}"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
column="persen_selesai"
|
<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"
|
css-class="text-white !text-right"
|
||||||
:customize-text="(e: any) => formatPercentage(e.value)"
|
:customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
|
||||||
/>
|
<DxTotalItem summary-type="max" display-format="{0}" column="max_durasi_recovery"
|
||||||
<DxTotalItem
|
|
||||||
summary-type="sum"
|
|
||||||
display-format="{0}"
|
|
||||||
column="total_inproses"
|
|
||||||
css-class="text-white !text-right"
|
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"
|
||||||
<DxTotalItem
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
summary-type="avg"
|
<DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_recovery"
|
||||||
display-format="{0}"
|
css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
|
||||||
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)"
|
|
||||||
/>
|
|
||||||
</DxSummary>
|
</DxSummary>
|
||||||
|
|
||||||
<template #formatTime="{ data }">
|
<template #formatTime="{ data }">
|
||||||
@ -441,189 +190,55 @@
|
|||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="dialogDetail" title="Rekapitulasi Keluhan Per Tanggal" @on-close="closedialogDetail"
|
||||||
:open="dialogDetail"
|
:full-width="true">
|
||||||
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="w-full mb-4 lg:w-[70%] lg:float-left">
|
||||||
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
<div class="p-4 bg-white rounded-xl lg:mr-4">
|
||||||
<DxDataGrid
|
<DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
|
||||||
:allow-column-reordering="true"
|
:show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
|
||||||
:data-source="dataSub"
|
@exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
|
||||||
: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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="20" :enabled="true" />
|
<DxPaging :page-size="20" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
|
||||||
:visible="true"
|
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
|
||||||
:width="50"
|
caption="No" cell-template="formatNumber" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
:calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
caption="No"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
cell-template="formatNumber"
|
<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
|
<DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Selesai Bidang Unit"
|
||||||
:width="150"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
cell-template="formatText"
|
<DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
|
||||||
/>
|
css-class="custom-table-column" cell-template="formatTime" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
:width="150"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
data-field="waktu_lapor"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
css-class="custom-table-column"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||||
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
|
<DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
:width="150"
|
:allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Rayon" :allow-resizing="false"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
caption="Dalam Proses Bidang"
|
<DxColumn :width="150" alignment="center" data-field="uraian" caption="Uraian" :allow-resizing="false"
|
||||||
:allow-resizing="false"
|
css-class="custom-table-column" cell-template="formatText" />
|
||||||
css-class="custom-table-column"
|
<DxColumn :width="150" alignment="center" data-field="respon_pelanggan" caption="Respon Pelanggan"
|
||||||
cell-template="formatText"
|
: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 }">
|
<template #formatText="{ data }">
|
||||||
<p class="text-left cursor-pointer">
|
<p class="text-left cursor-pointer">
|
||||||
@ -660,46 +275,28 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_response" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_response"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.waktu_recovery" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.waktu_recovery"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_response_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_response_time)
|
? formatWaktu(dataSubSelected?.durasi_response_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
|
||||||
:readonly="true"
|
|
||||||
:value="
|
|
||||||
parseInt(dataSubSelected?.durasi_recovery_time)
|
|
||||||
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
? formatWaktu(dataSubSelected?.durasi_recovery_time)
|
||||||
: '-'
|
: '-'
|
||||||
"
|
" class-name="flex-1" />
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -719,30 +316,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.alamat_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataSubSelected?.alamat_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">NO Telp Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.no_telp_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.no_telp_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" :value="dataSubSelected?.keterangan_pelapor" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
:value="dataSubSelected?.keterangan_pelapor"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -752,22 +336,12 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.uraian" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataSubSelected?.uraian"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
|
<h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataSubSelected?.respon_pelanggan" class-name="flex-1" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataSubSelected?.respon_pelanggan"
|
|
||||||
class-name="flex-1"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -777,6 +351,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
import InputText from '@/components/InputText.vue'
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
@ -950,6 +525,7 @@ const onExporting = (e: any) => {
|
|||||||
} else if (e.format === 'xlsx') {
|
} else if (e.format === 'xlsx') {
|
||||||
exportToXLSX(reportMeta.value, e)
|
exportToXLSX(reportMeta.value, e)
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from '@/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan All'
|
const reportName = 'Rekapitulasi Gangguan All'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -299,7 +300,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
|
|||||||
const doc = new jsPDF({
|
const doc = new jsPDF({
|
||||||
orientation: 'landscape'
|
orientation: 'landscape'
|
||||||
})
|
})
|
||||||
|
console.log(data)
|
||||||
autoTable(doc, {
|
autoTable(doc, {
|
||||||
head: [
|
head: [
|
||||||
['PT. PLN(Persero)', '', ''],
|
['PT. PLN(Persero)', '', ''],
|
||||||
@ -642,8 +643,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -652,8 +652,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -662,8 +661,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -737,5 +735,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
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 }
|
||||||
|
|||||||
@ -16,9 +16,9 @@ import { saveAs } from 'file-saver'
|
|||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import autoTable from 'jspdf-autotable'
|
import autoTable from 'jspdf-autotable'
|
||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber } from '@/utils/numbers'
|
import { formatNumber } from '@/utils/numbers'
|
||||||
|
import { exportToWord, exportDetailToWord } from '@/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Alih Posko'
|
const reportName = 'Rekapitulasi Gangguan Alih Posko'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -397,8 +397,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -407,8 +406,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -417,8 +415,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -490,5 +487,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
|
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 }
|
||||||
|
|||||||
@ -18,6 +18,7 @@ import autoTable from 'jspdf-autotable'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber } from '@/utils/numbers'
|
import { formatNumber } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_BerdasarMedia_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Berdasarkan Media'
|
const reportName = 'Rekapitulasi Gangguan Berdasarkan Media'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -399,8 +400,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -409,8 +409,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -419,8 +418,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -494,5 +492,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
|
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,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber } from '@/utils/numbers'
|
import { formatNumber } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_CTTM_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Cleansing Transaksi TM'
|
const reportName = 'Rekapitulasi Cleansing Transaksi TM'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -505,5 +506,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
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,6 +18,7 @@ import autoTable from 'jspdf-autotable'
|
|||||||
import { Workbook } from 'exceljs'
|
import { Workbook } from 'exceljs'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_DMAPKT_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Diselesaikan Mobile APKT'
|
const reportName = 'Rekapitulasi Gangguan Diselesaikan Mobile APKT'
|
||||||
const fontSize = 4
|
const fontSize = 4
|
||||||
@ -557,8 +558,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -567,8 +567,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -577,8 +576,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -652,5 +650,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
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,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
import { exportToWord } from './doc/RGangguan_JenisGangguan_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Jenis Gangguan'
|
const reportName = 'Rekapitulasi Gangguan Jenis Gangguan'
|
||||||
|
|
||||||
@ -59,7 +60,7 @@ const formatData = (rawData: any) => {
|
|||||||
total_recovery_time_kurang_sla: 0
|
total_recovery_time_kurang_sla: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const sub_kelompok of data) {
|
for (const sub_kelompok of Object.keys(data)) {
|
||||||
const total: any = {
|
const total: any = {
|
||||||
total_laporan: 0,
|
total_laporan: 0,
|
||||||
total_laporan_sudah_selesai: 0,
|
total_laporan_sudah_selesai: 0,
|
||||||
@ -492,8 +493,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -502,8 +502,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -512,8 +511,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -549,5 +547,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportToXLSX }
|
exportToWord(reportMeta, formatData(rawData), `Laporan ${reportName}`, formatMetaData(reportMeta))
|
||||||
|
}
|
||||||
|
export { exportToPDF, exportToXLSX, exportToDOCX }
|
||||||
|
|||||||
@ -19,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_JenisGangguanSE_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Jenis Gangguan SE 004'
|
const reportName = 'Rekapitulasi Gangguan Jenis Gangguan SE 004'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -610,8 +611,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -620,8 +620,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -630,8 +629,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -706,4 +704,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
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,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber } from '@/utils/numbers'
|
import { formatNumber } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_KTI_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
|
const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -476,8 +477,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -486,8 +486,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -496,8 +495,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -571,5 +569,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
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 }
|
||||||
|
|||||||
@ -1,17 +1,5 @@
|
|||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
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 { saveAs } from 'file-saver'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import autoTable from 'jspdf-autotable'
|
import autoTable from 'jspdf-autotable'
|
||||||
@ -19,6 +7,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_PerPosko_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Per Posko'
|
const reportName = 'Rekapitulasi Gangguan Per Posko'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -599,8 +588,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -609,8 +597,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -686,4 +673,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
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 }
|
||||||
|
|||||||
@ -1,17 +1,5 @@
|
|||||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
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 { saveAs } from 'file-saver'
|
||||||
import { jsPDF } from 'jspdf'
|
import { jsPDF } from 'jspdf'
|
||||||
import autoTable from 'jspdf-autotable'
|
import autoTable from 'jspdf-autotable'
|
||||||
@ -19,6 +7,8 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
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 reportName = 'Rekapitulasi Gangguan Per Regu'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -661,8 +651,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -671,8 +660,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -681,8 +669,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -758,4 +745,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
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,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_PerTanggal_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Gangguan Per Tanggal'
|
const reportName = 'Rekapitulasi Gangguan Per Tanggal'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -655,8 +656,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -665,8 +665,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -675,8 +674,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -750,5 +748,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
|
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,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
import { numberToStars } from '@/report/utils/rating'
|
import { numberToStars } from '@/report/utils/rating'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_RatingPerPosko_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Rating Per Posko'
|
const reportName = 'Rekapitulasi Rating Per Posko'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -415,8 +416,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -425,8 +425,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -501,5 +500,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
e.cancel = true
|
||||||
}
|
}
|
||||||
|
const exportToDOCX = (reportMeta: any, rawData: any) => {
|
||||||
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
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,6 +19,7 @@ import { Workbook } from 'exceljs'
|
|||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
import { numberToStars } from '@/report/utils/rating'
|
import { numberToStars } from '@/report/utils/rating'
|
||||||
|
import { exportDetailToWord, exportToWord } from './doc/RGangguan_RatingPerRegu_DOC'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Rating Per Regu'
|
const reportName = 'Rekapitulasi Rating Per Regu'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
@ -395,8 +396,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -405,8 +405,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -415,8 +414,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`POSKO : ${
|
`POSKO : ${reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
||||||
reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
|
|
||||||
}`
|
}`
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -491,4 +489,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
e.cancel = true
|
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
282
src/report/Gangguan/Rekap/doc/RGangguan_ALL_DOC.ts
Normal 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
251
src/report/Gangguan/Rekap/doc/RGangguan_AlihPosko_DOC.ts
Executable 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
280
src/report/Gangguan/Rekap/doc/RGangguan_BerdasarMedia_DOC.ts
Normal 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
279
src/report/Gangguan/Rekap/doc/RGangguan_CTTM_DOC.ts
Normal 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
315
src/report/Gangguan/Rekap/doc/RGangguan_DMAPKT_DOC.ts
Normal 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
280
src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguanSE_DOC.ts
Normal 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
280
src/report/Gangguan/Rekap/doc/RGangguan_JenisGangguan_DOC.ts
Normal 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
293
src/report/Gangguan/Rekap/doc/RGangguan_KTI_DOC.ts
Normal 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
278
src/report/Gangguan/Rekap/doc/RGangguan_PerPosko_DOC.ts
Normal 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
281
src/report/Gangguan/Rekap/doc/RGangguan_PerRegu_DOC.ts
Normal 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
278
src/report/Gangguan/Rekap/doc/RGangguan_PerTanggal_DOC.ts
Normal 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
276
src/report/Gangguan/Rekap/doc/RGangguan_RatingPerPosko_DOC.ts
Normal 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
276
src/report/Gangguan/Rekap/doc/RGangguan_RatingPerRegu_DOC.ts
Normal 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 }
|
||||||
@ -427,8 +427,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -437,8 +436,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -447,8 +445,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`UNIT LAYANAN PELANGGAN : ${
|
`UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
|
||||||
reportMeta.ulp
|
|
||||||
? reportMeta.ulp.name.toUpperCase()
|
? reportMeta.ulp.name.toUpperCase()
|
||||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -525,5 +522,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
|
|||||||
|
|
||||||
e.cancel = true
|
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 }
|
export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
|
||||||
|
|||||||
@ -19,11 +19,9 @@ import { Workbook } from 'exceljs'
|
|||||||
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
import { formatWaktu } from '@/components/Form/FiltersType/reference'
|
||||||
import { setHeaderStyle } from '@/report/utils/xlsx'
|
import { setHeaderStyle } from '@/report/utils/xlsx'
|
||||||
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
import { formatNumber, formatPercentage } from '@/utils/numbers'
|
||||||
|
|
||||||
const reportName = 'Rekapitulasi Keluhan Per Tanggal'
|
const reportName = 'Rekapitulasi Keluhan Per Tanggal'
|
||||||
const fontSize = 5
|
const fontSize = 5
|
||||||
const detailFontSize = 3
|
const detailFontSize = 3
|
||||||
|
|
||||||
const groupingData = (data: any) => {
|
const groupingData = (data: any) => {
|
||||||
const groupedData: any = {}
|
const groupedData: any = {}
|
||||||
|
|
||||||
@ -655,8 +653,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
2,
|
2,
|
||||||
1,
|
1,
|
||||||
`UNIT INDUK : ${
|
`UNIT INDUK : ${reportMeta.uid
|
||||||
reportMeta.uid
|
|
||||||
? reportMeta.uid.name.toUpperCase()
|
? reportMeta.uid.name.toUpperCase()
|
||||||
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
: 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -665,8 +662,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
3,
|
3,
|
||||||
1,
|
1,
|
||||||
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${
|
`UNIT PELAKSANA PELAYANAN PELANGGAN : ${reportMeta.up3
|
||||||
reportMeta.up3
|
|
||||||
? reportMeta.up3.name.toUpperCase()
|
? reportMeta.up3.name.toUpperCase()
|
||||||
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
@ -675,8 +671,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
|
|||||||
worksheet,
|
worksheet,
|
||||||
4,
|
4,
|
||||||
1,
|
1,
|
||||||
`UNIT LAYANAN PELANGGAN : ${
|
`UNIT LAYANAN PELANGGAN : ${reportMeta.ulp
|
||||||
reportMeta.ulp
|
|
||||||
? reportMeta.ulp.name.toUpperCase()
|
? reportMeta.ulp.name.toUpperCase()
|
||||||
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
: 'Semua Unit Layanan Pelanggan'.toUpperCase()
|
||||||
}`
|
}`
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user