Rekapitulasi Gangguan ALL s/d Diselesaikan Mobile APKT 7- 17
This commit is contained in:
		| @@ -1,9 +1,9 @@ | ||||
| <template> | ||||
|     <div> | ||||
|         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true" | ||||
|             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged" | ||||
|             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" | ||||
|             :word-wrap-enabled="true"> | ||||
|         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" | ||||
|             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" | ||||
|             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" | ||||
|             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true"> | ||||
|             <DxSelection mode="single" /> | ||||
|             <DxPaging :enabled="false" /> | ||||
|             <DxScrolling column-rendering-mode="virtual" mode="virtual" /> | ||||
| @@ -13,18 +13,11 @@ | ||||
|             <DxColumnFixing :enabled="true" /> | ||||
|  | ||||
|             <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" /> | ||||
|             <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" /> | ||||
|             <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" | ||||
|                 css-class="custom-table-column" /> | ||||
|             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column"> | ||||
|                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1" | ||||
|                     css-class="custom-table-column" /> | ||||
|                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2" | ||||
|                     css-class="custom-table-column" /> | ||||
|                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3" | ||||
|                     css-class="custom-table-column" /> | ||||
|                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4" | ||||
|                     css-class="custom-table-column" /> | ||||
|                 <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5" | ||||
|                     css-class="custom-table-column" /> | ||||
|                 <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" | ||||
|                     :caption="i" css-class="custom-table-column" /> | ||||
|             </DxColumn> | ||||
|  | ||||
|         </DxDataGrid> | ||||
| @@ -32,7 +25,7 @@ | ||||
| </template> | ||||
|  | ||||
| <script setup lang="ts"> | ||||
| import { onMounted } from 'vue' | ||||
| import { onMounted, ref } from 'vue' | ||||
| import { useFiltersStore } from '@/stores/filters' | ||||
| import { DxDataGrid } from 'devextreme-vue' | ||||
| import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid' | ||||
| @@ -41,7 +34,8 @@ 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 { useQuery } from '@vue/apollo-composable' | ||||
| import gql from 'graphql-tag'; | ||||
| const onExporting = (e: any) => { | ||||
|     if (e.format === 'pdf') { | ||||
|         const doc = new jsPDF() | ||||
| @@ -76,9 +70,80 @@ const onSelectionChanged = ({ selectedRowsData }: any) => { | ||||
|     console.log(data) | ||||
| } | ||||
|  | ||||
|  | ||||
| const data = ref<any[]>([]) | ||||
| const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql` | ||||
| query rekapitulasiGangguanBerdasarkanMedia( | ||||
|     $dateFrom: Date! | ||||
|     $dateTo: Date! | ||||
|     $posko: String! | ||||
|     $idUid: Int! | ||||
|     $idUp3: Int! | ||||
| ) { | ||||
|     rekapitulasiGangguanBerdasarkanMedia( | ||||
|         dateFrom: $dateFrom | ||||
|         dateTo: $dateTo | ||||
|         posko: $posko | ||||
|         idUid: $idUid | ||||
|         idUp3: $idUp3 | ||||
|     ) { | ||||
|                 media | ||||
|             tgl1 | ||||
|             tgl10 | ||||
|             tgl11 | ||||
|             tgl12 | ||||
|             tgl13 | ||||
|             tgl14 | ||||
|             tgl15 | ||||
|             tgl16 | ||||
|             tgl17 | ||||
|             tgl18 | ||||
|             tgl19 | ||||
|             tgl2 | ||||
|             tgl20 | ||||
|             tgl21 | ||||
|             tgl22 | ||||
|             tgl23 | ||||
|             tgl24 | ||||
|             tgl25 | ||||
|             tgl26 | ||||
|             tgl27 | ||||
|             tgl28 | ||||
|             tgl29 | ||||
|             tgl3 | ||||
|             tgl30 | ||||
|             tgl31 | ||||
|             tgl4 | ||||
|             tgl5 | ||||
|             tgl6 | ||||
|             tgl7 | ||||
|             tgl8 | ||||
|             tgl9 | ||||
|         } | ||||
| }`; | ||||
| const loadingVisible = ref<boolean>(true) | ||||
| onMounted(() => { | ||||
|     const filters = useFiltersStore() | ||||
|     const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, { | ||||
|         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         dateTo: new Date("2023-10-01").toISOString().slice(0, 10), | ||||
|         posko: "", | ||||
|         idUid: 0, | ||||
|         idUp3: 0, | ||||
|     }) | ||||
|  | ||||
|     onResult(queryResult => { | ||||
|         if (queryResult.data != undefined) { | ||||
|             data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia; | ||||
|             loadingVisible.value = false | ||||
|         } | ||||
|         console.log(queryResult.data) | ||||
|         console.log(queryResult.loading) | ||||
|         console.log(queryResult.networkStatus) | ||||
|     }) | ||||
|     onError((error) => { | ||||
|         console.log(error) | ||||
|     }) | ||||
|     filters.setConfig({ | ||||
|         type: 'type-1', | ||||
|         reportButton: true | ||||
|   | ||||
		Reference in New Issue
	
	Block a user