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

2024-03-20 16:18:22 +07:00 · 2024-03-20 16:18:22 +07:00 · 9d75cdf7c2
commit 9d75cdf7c2
parent 846c24acac 9fb2c6bbb1
4 changed files with 460 additions and 62 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -25,6 +25,7 @@
        "axios": "^1.6.7",
        "devextreme": "23.2.4",
        "devextreme-vue": "23.2.4",
+        "docx": "^8.5.0",
        "dotenv": "^16.3.1",
        "encrypt-storage": "^2.12.22",
        "exceljs": "^4.4.0",
@ -4032,6 +4033,46 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/docx": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-8.5.0.tgz",
+      "integrity": "sha512-4SbcbedPXTciySXiSnNNLuJXpvxFe5nqivbiEHXyL8P/w0wx2uW7YXNjnYgjW0e2e6vy+L/tMISU/oAiXCl57Q==",
+      "dependencies": {
+        "@types/node": "^20.3.1",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.0.4",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "20.11.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
+      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+      "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
    "node_modules/domexception": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@ -7414,6 +7455,11 @@
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+    },
    "node_modules/saxes": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@ -8098,8 +8144,7 @@
    "node_modules/undici-types": {
      "version": "5.26.5",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "devOptional": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
    },
    "node_modules/universalify": {
      "version": "0.2.0",
@ -9747,6 +9792,22 @@
        }
      }
    },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
    "node_modules/xml-name-validator": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -31,6 +31,7 @@
    "axios": "^1.6.7",
    "devextreme": "23.2.4",
    "devextreme-vue": "23.2.4",
+    "docx": "^8.5.0",
    "dotenv": "^16.3.1",
    "encrypt-storage": "^2.12.22",
    "exceljs": "^4.4.0",
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@ -366,6 +366,20 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  TableBorders,
+  PageOrientation
+} from 'docx'

 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
@ -394,6 +408,65 @@ const setHeaderStyle = (
  }
 }

+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),
+    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
+    }
+
+    reportMeta.value = filters.value
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.daftar.dataDialihkanKePoskoLain,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+}
+const showData = () => (showDetail.value = true)
+
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
+
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  }
+})
+
 const onExporting = (e: any) => {
  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''

@ -567,7 +640,7 @@ const onExporting = (e: any) => {
      .then(() => {
        console.log('pdf berhasil disimpan')
      })
-  } else {
+  } else if (e.format === 'xlsx') {
    const workbook = new Workbook()
    const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')

@ -634,65 +707,255 @@ const onExporting = (e: any) => {
    })

    e.cancel = true
-  }
-}
-
-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),
-    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
+  } else {
+    const generateRows = () => {
+      return data.value.map((item, i) => {
+        return new TableRow({
+          children: [
+            { text: `${++i}`, field: 'no_laporan' },
+            { text: item.no_laporan, field: 'no_laporan' },
+            { text: item.pembuat_laporan, field: 'pembuat_laporan' },
+            { text: item.waktu_lapor, field: 'waktu_lapor' },
+            { text: item.waktu_dialihkan, field: 'waktu_dialihkan' },
+            { text: item.waktu_response, field: 'waktu_response' },
+            { text: item.waktu_recovery, field: 'waktu_recovery' },
+            {
+              text: parseInt(item.durasi_response_time)
+                ? formatWaktu(item.durasi_response_time)
+                : '-',
+              field: 'durasi_response_time'
+            },
+            {
+              text: parseInt(item.durasi_recovery_time)
+                ? formatWaktu(item.durasi_recovery_time)
+                : '-',
+              field: 'durasi_recovery_time'
+            },
+            { text: item.nama_posko_lama, field: 'nama_posko_lama' },
+            { text: item.nama_posko_baru, field: 'nama_posko_baru' },
+            { text: item.status_akhir, field: 'status_akhir' },
+            { text: item.idpel_nometer, field: 'idpel_nometer' },
+            { text: item.nama_pelapor, field: 'nama_pelapor' },
+            { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+            { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+            { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+            { text: item.media, field: 'media' },
+            { text: item.posko, field: 'posko' }
+          ].map(
+            (cell) =>
+              new TableCell({
+                children: [
+                  new Paragraph({
+                    children: [
+                      new TextRun({
+                        text: cell.text,
+                        size: 4
+                      })
+                    ]
+                  })
+                ],
+                verticalAlign: VerticalAlign.CENTER
+              })
+          )
+        })
+      })
    }

-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.dataDialihkanKePoskoLain,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataDetail.value = data
-}
-const showData = () => (showDetail.value = true)
+    const doc = new Document({
+      sections: [
+        {
+          properties: {
+            page: {
+              size: {
+                orientation: PageOrientation.LANDSCAPE
+              }
+            }
+          },
+          children: [
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: 'PT. PLN(Persero)',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: `UNIT INDUK : ${
+                    reportMeta.value.uid
+                      ? reportMeta.value.uid.name.toUpperCase()
+                      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                  }`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                    reportMeta.value.up3
+                      ? reportMeta.value.up3.name.toUpperCase()
+                      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                  }`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: `POSKO : ${
+                    reportMeta.value.posko
+                      ? reportMeta.value.posko.name.toUpperCase()
+                      : 'Semua Posko'.toUpperCase()
+                  }`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.CENTER,
+              children: [
+                new TextRun({
+                  text: 'DAFTAR GANGGUAN DIALIHKAN KE POSKO LAIN',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.CENTER,
+              children: [
+                new TextRun({
+                  text: `PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Table({
+              width: {
+                size: 13950,
+                type: WidthType.DXA
+              },
+              rows: [
+                new TableRow({
+                  children: [
+                    { text: 'No', field: 'no' },
+                    { text: 'No Laporan', field: 'no_laporan' },
+                    { text: 'Pembuat Laporan', field: 'pembuat_laporan' },
+                    { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                    { text: 'Tgl Dialihkan', field: 'waktu_dialihkan' },
+                    { text: 'Tgl Response', field: 'waktu_response' },
+                    { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                    { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                    { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                    { text: 'Posko Awal', field: 'nama_posko_lama' },
+                    { text: 'Posko Tujuan', field: 'nama_posko_baru' },
+                    { text: 'Status', field: 'status_akhir' },
+                    { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                    { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                    { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                    { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                    { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                    { text: 'Sumber Lapor', field: 'media' },
+                    { text: 'Posko', field: 'posko' }
+                  ].map(
+                    (header) =>
+                      new TableCell({
+                        children: [
+                          new Paragraph({
+                            alignment: AlignmentType.CENTER,
+                            children: [
+                              new TextRun({
+                                text: header.text,
+                                bold: true,
+                                size: 4,
+                                allCaps: true
+                              })
+                            ]
+                          })
+                        ],
+                        verticalAlign: VerticalAlign.CENTER
+                      })
+                  )
+                }),
+                ...generateRows()
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.RIGHT,
+              children: [
+                new TextRun({
+                  text: `${dayTo}, ${dateToFormat}`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.RIGHT,
+              children: [
+                new TextRun({
+                  text: '(.........................................)',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            })
+          ]
+        }
+      ]
+    })

-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+    Packer.toBlob(doc).then((blob) => {
+      console.log(blob)
+      saveAs(blob, 'Laporan Daftar Gangguan Dialihkan Ke Posko Lain.docx')
+      console.log('Document created successfully')
+    })
  }
-})
+}
 </script>
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@ -401,6 +401,24 @@ const filterData = (params: any) => {
  })
 }

+const setHeaderStyle = (
+  worksheet: any,
+  row: number,
+  column: number,
+  value: string,
+  horizontalAlignment: boolean = false
+) => {
+  const cell = worksheet.getRow(row).getCell(column)
+
+  cell.value = value
+  cell.alignment = { vertical: 'middle' }
+  cell.font = { bold: true }
+
+  if (horizontalAlignment) {
+    cell.alignment.horizontal = 'center'
+  }
+}
+
 const onExporting = (e: any) => {
  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''

@ -578,15 +596,70 @@ const onExporting = (e: any) => {
    const workbook = new Workbook()
    const worksheet = workbook.addWorksheet('Daftar Gangguan Melapor Lebih Dari 1 Kali')

+    setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+    setHeaderStyle(
+      worksheet,
+      2,
+      1,
+      `UNIT INDUK : ${
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      }`
+    )
+    setHeaderStyle(
+      worksheet,
+      3,
+      1,
+      `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      }`
+    )
+    setHeaderStyle(
+      worksheet,
+      4,
+      1,
+      `POSKO : ${
+        reportMeta.value.posko
+          ? reportMeta.value.posko.name.toUpperCase()
+          : 'Semua Posko'.toUpperCase()
+      }`
+    )
+    setHeaderStyle(
+      worksheet,
+      5,
+      1,
+      `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`
+    )
+
+    setHeaderStyle(worksheet, 7, 8, `Daftar Gangguan Melapor Lebih Dari 1 Kali`.toUpperCase(), true)
+    setHeaderStyle(
+      worksheet,
+      8,
+      8,
+      `PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`,
+      true
+    )
+
+    worksheet.mergeCells('A1:F1')
+    worksheet.mergeCells('A2:F2')
+    worksheet.mergeCells('A3:F3')
+    worksheet.mergeCells('A4:F4')
+    worksheet.mergeCells('H7:J7')
+    worksheet.mergeCells('H8:J8')
+
    exportToExcel({
      component: e.component,
      worksheet,
-      autoFilterEnabled: true
+      autoFilterEnabled: true,
+      topLeftCell: { row: 11, column: 1 }
    }).then(() => {
      workbook.xlsx.writeBuffer().then((buffer: any) => {
        saveAs(
          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Gangguan Melapor Lebih Dari 1 Kali.xlsx'
+          'Laporan Daftar Gangguan Melapor Lebih Dari 1 Kali.xlsx'
        )
      })
    })