+
{
inputmode="numeric"
pattern="[0-9.]*"
:disabled="disabled"
- @oninput="handleInput($event)"
- @onblur="handleBlur($event)"
- @onfocus="handleFocus($event)"
+ @input="handleInput($event)"
+ @blur="handleBlur($event)"
+ @focus="handleFocus($event)"
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
/>
diff --git a/src/components/InputText.vue b/src/components/InputText.vue
index e51eb58..6ccd13f 100755
--- a/src/components/InputText.vue
+++ b/src/components/InputText.vue
@@ -2,58 +2,74 @@
import { ref } from 'vue'
const props = defineProps({
- type: {
- type: String,
- default: "text",
- },
- placeholder: {
- type: String,
- default: "",
- },
- value: {
- type: String,
- default: "",
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- readonly: {
- type: Boolean,
- default: false,
- },
- className: {
- type: String,
- default: "",
- }
+ type: {
+ type: String,
+ default: 'text'
+ },
+ placeholder: {
+ type: String,
+ default: ''
+ },
+ value: {
+ type: String,
+ default: ''
+ },
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ readonly: {
+ type: Boolean,
+ default: false
+ },
+ className: {
+ type: String,
+ default: ''
+ }
})
const emit = defineEmits(['update:value'])
const updateValue = (event: Event) => {
- const value = (event.target as HTMLInputElement).value;
- emit('update:value', value)
+ const value = (event.target as HTMLInputElement).value
+ emit('update:value', value)
}
const inputType = ref(props.type)
const switchInputType = () => {
- inputType.value = inputType.value == 'password' ? 'text' : 'password'
+ inputType.value = inputType.value == 'password' ? 'text' : 'password'
}
-
-
-
\ No newline at end of file
+
+
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 3783e22..21a6e1e 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,65 +1,203 @@
-
-
+
+
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ data.text }}
@@ -68,135 +206,107 @@
-
+
-
- No Laporan:
-
+ No Laporan:
-
- Pembuat Laporan:
-
+ Pembuat Laporan:
-
- Tanggal Laporan:
-
+ Tanggal Laporan:
-
- Tanggal Dialihkan:
-
+ Tanggal Dialihkan:
-
- Tanggal Respon:
-
+ Tanggal Respon:
-
- Tanggal Recovery:
-
+ Tanggal Recovery:
-
- Durasi Response Time:
-
+ Durasi Response Time:
-
- Durasi Recovery Time:
-
+ Durasi Recovery Time:
-
- Posko Awal:
-
+ Posko Awal:
-
- Posko Tujuan:
-
+ Posko Tujuan:
-
- Status:
-
+ Status:
-
- IDPEL/NO METER:
-
+ IDPEL/NO METER:
-
- Nama Pelapor:
-
+ Nama Pelapor:
-
- Alamat Pelapor:
-
-
+ Alamat Pelapor:
+
-
- Pembuat Laporan:
-
+ Pembuat Laporan:
-
- Keterangan Pelapor:
-
+ Keterangan Pelapor:
-
- Sumber Laporan:
-
+ Sumber Laporan:
-
- Posko:
-
+ Posko:
-
@@ -210,66 +320,96 @@ import {
DxLoadPanel,
DxPager,
DxPaging,
- DxScrolling,
DxSearchPanel,
DxSelection
} from 'devextreme-vue/data-grid'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
import { jsPDF } from 'jspdf'
import autoTable from 'jspdf-autotable'
-
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
-import { useDialogStore } from '@/stores/dialog'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
+
const position = { of: '#dataTable' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
-const dialog = useDialogStore()
const data = ref
([])
const dataDetail = ref()
const showDetail = ref(false)
-const runReset = ref(false)
const closeDetail = () => {
showDetail.value = false
}
-const onExporting = (e: any) => {
+const onExporting = (e: any) => {
if (e.format === 'pdf') {
const doc = new jsPDF({
orientation: 'landscape',
unit: 'mm',
- format: 'F4',
+ format: 'F4'
})
- // Add title on each page
- const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
// Initialize page number
- const pageNumber = ref(1);
+ const pageNumber = ref(1)
autoTable(doc, {
- head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+ head: [
+ [
+ 'No Laporan',
+ 'Pembuat Laporan',
+ 'Tgl Lapor',
+ 'Tgl Dialihkan',
+ 'Tgl Response',
+ 'Tgl Recovery',
+ 'Durasi Response Time',
+ 'Durasi Recovery Time',
+ 'Posko Awal',
+ 'Posko Tujuan',
+ 'Status',
+ 'IDPEL/NO METER',
+ 'Nama Pelapor',
+ 'Alamat Pelapor',
+ 'No Telp Pelapor',
+ 'Keterangan Pelapor',
+ 'Sumber Lapor',
+ 'Posko'
+ ]
+ ],
startY: 10,
- body: data.value.map((item) =>
- [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
+ body: data.value.map((item) => [
+ item.no_laporan,
+ item.pembuat_laporan,
+ item.waktu_lapor,
+ item.waktu_dialihkan,
+ item.waktu_response,
+ item.waktu_recovery,
+ item.durasi_response_time,
+ item.durasi_recovery_time,
+ item.nama_posko_lama,
+ item.nama_posko_baru,
+ item.status_akhir,
+ item.idpel_nometer,
+ item.nama_pelapor,
+ item.alamat_pelapor,
+ item.no_telp_pelapor,
+ item.keterangan_pelapor,
+ item.media,
+ item.posko
+ ]),
styles: {
fontSize: 6,
cellWidth: 'wrap'
- },
-
-
+ }
})
doc.setProperties({
title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
- subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
- });
-
- pageNumber.value++; // Increment the pageNumber
+ subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
+ })
+
+ pageNumber.value++ // Increment the pageNumber
doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
// exportToPdf({
@@ -289,7 +429,10 @@ const onExporting = (e: any) => {
autoFilterEnabled: true
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
- saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
+ saveAs(
+ new Blob([buffer], { type: 'application/octet-stream' }),
+ 'DaftarGangguanDialihkanKePoskoLain.xlsx'
+ )
})
})
@@ -332,15 +475,19 @@ const filterData = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
refetch({
- dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
- dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+ dateFrom: dateValue[0]
+ ? dateValue[0].split('-').reverse().join('-')
+ : new Date().toISOString().slice(0, 10),
+ dateTo: dateValue[1]
+ ? dateValue[1].split('-').reverse().join('-')
+ : new Date().toISOString().slice(0, 10),
posko: posko ? posko.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
})
onResult((queryResult) => {
if (queryResult.data != undefined) {
- data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
+ data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
}
console.log(queryResult.data)
console.log(queryResult.loading)
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index d237ad4..e29179b 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -1,166 +1,271 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
- {{ data.text }}
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ data.text }}
+
+
+
+
+
+
+
+
+
No Laporan:
+
+
+
+
+
Tgl Lapor:
+
+
+
+
+
Tgl Response:
+
+
+
+
+
Tgl Recovery:
+
+
+
+
+
Jml Lapor:
+
+
+
+
+
Response Time:
+
+
+
+
+
Recovery Time:
+
+
+
+
+
Status :
+
+
+
+
+
IDPEL/NOMETER:
+
+
+
+
+
Nama Pelapor:
+
+
+
+
+
Alamat Pelapor:
+
+
+
+
+
No Telp Pelapor:
+
+
+
+
+
Keterangan Pelapor:
+
+
+
+
+
Sumper Lapor:
+
+
+
+
+
Unit Layanan Pelanggan:
+
+
-
-
- No Laporan:
-
-
-
-
-
-
- Tanggal Lapor:
-
-
-
-
-
-
- Tanggal Response:
-
-
-
-
-
-
- Tanggal Recovery:
-
-
-
-
-
-
- Jumlah Lapor:
-
-
-
-
-
-
- Durasi Response Time:
-
-
-
-
-
-
- Durasi Response Time:
-
-
-
-
-
-
- Status :
-
-
-
-
-
-
- IDPEL/NO METER:
-
-
-
-
-
-
- Nama Pelapor:
-
-
-
-
-
-
- No Telp Pelapor:
-
-
-
-
-
-
- Keterangan Pelapor:
-
-
-
-
-
-
- Sumper Lapor:
-
-
-
-
-
-
- Posko:
-
-
-
-
\ No newline at end of file
+
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 9f4ba9a..c71967e 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -1,55 +1,277 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ data.text }}
+
+
+
+
+
+
+
+
+
No Laporan:
+
+
+
+
+
Tgl Lapor:
+
+
+
+
+
Tgl Response:
+
+
+
+
+
Tgl Recovery:
+
+
+
+
+
Response Time:
+
+
+
+
+
Recovery Time:
+
+
+
+
+
Status :
+
+
+
+
+
IDPEL/NOMETER:
+
+
+
+
+
Nama Pelapor:
+
+
+
+
+
Alamat Pelapor:
+
+
+
+
+
No Telp Pelapor:
+
+
+
+
+
Keterangan Pelapor:
+
+
+
+
+
Sumper Lapor:
+
+
+
+
+
Unit Layanan Pelanggan:
+
+
+
+
+
Penyebab:
+
+
+
+
+
Tindakan:
+
+
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+