change file name and directory network.ts n graphql
This commit is contained in:
		| @@ -1,58 +1,25 @@ | ||||
| <template> | ||||
|   <Filters | ||||
|     @reset-form="data = []" | ||||
|     @run-search="() => filterData(filters)" | ||||
|     :report-button="true" | ||||
|     class="mb-4" | ||||
|   > | ||||
|   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4"> | ||||
|     <Type13 @update:filters="(value) => filters = value" /> | ||||
|   </Filters> | ||||
|  | ||||
|   <div id="data"> | ||||
|     <DxDataGrid | ||||
|       class="max-h-[calc(100vh-140px)] mb-10" | ||||
|       :data-source="data" | ||||
|       :show-column-lines="true" | ||||
|       :show-row-lines="false" | ||||
|       :show-borders="true" | ||||
|       :row-alternation-enabled="true" | ||||
|       :hover-state-enabled="true" | ||||
|       @selection-changed="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)] mb-10" :data-source="data" :show-column-lines="true" | ||||
|       :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" | ||||
|       @selection-changed="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" /> | ||||
|       <DxLoadPanel | ||||
|         :position="position" | ||||
|         :show-indicator="showIndicator" | ||||
|         :show-pane="showPane" | ||||
|         :shading="shading" | ||||
|         v-if="loading" | ||||
|         v-model:visible="loading" | ||||
|         :enabled="true" | ||||
|       /> | ||||
|       <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" | ||||
|         v-if="loading" v-model:visible="loading" :enabled="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" /> | ||||
|       <DxColumnFixing :enabled="true" /> | ||||
|  | ||||
|       <DxColumn | ||||
|         css-class="custom-table-column" | ||||
|         :width="100" | ||||
|         alignment="center" | ||||
|         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" | ||||
|         data-type="number" | ||||
|         data-field="no" | ||||
|         caption="No" | ||||
|       /> | ||||
|       <DxColumn css-class="custom-table-column" :width="100" alignment="center" | ||||
|         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" data-field="no" | ||||
|         caption="No" /> | ||||
|       <!-- <DxColumn | ||||
|         :width="120" | ||||
|         alignment="center" | ||||
| @@ -63,284 +30,84 @@ | ||||
|         name="NamaUID" | ||||
|         v-if="filters.groupBy" | ||||
|       /> --> | ||||
|       <DxColumn | ||||
|         :width="170" | ||||
|         alignment="center" | ||||
|         data-field="fungsi_bidang" | ||||
|         caption="Fungsi Bidang" | ||||
|         css-class="custom-table-column" | ||||
|         cell-template="cell-left" | ||||
|       /> | ||||
|       <DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang" | ||||
|         css-class="custom-table-column" cell-template="cell-left" /> | ||||
|       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> | ||||
|         <DxColumn | ||||
|           :width="150" | ||||
|           alignment="center" | ||||
|           data-field="total" | ||||
|           data-type="number" | ||||
|           caption="Total" | ||||
|           css-class="custom-table-column" | ||||
|         /> | ||||
|         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total" | ||||
|           css-class="custom-table-column" /> | ||||
|         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column"> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_selesai" | ||||
|             data-type="number" | ||||
|             caption="Jml" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="persen_selesai" | ||||
|             data-type="number" | ||||
|             caption="%" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="percent" | ||||
|           /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml" | ||||
|             css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%" | ||||
|             css-class="custom-table-column" cell-template="percent" /> | ||||
|         </DxColumn> | ||||
|         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column"> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_inproses" | ||||
|             data-type="number" | ||||
|             caption="Jml" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="persen_inproses" | ||||
|             data-type="number" | ||||
|             caption="%" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="percent" | ||||
|           /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml" | ||||
|             css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%" | ||||
|             css-class="custom-table-column" cell-template="percent" /> | ||||
|         </DxColumn> | ||||
|       </DxColumn> | ||||
|       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column"> | ||||
|         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_durasi_response" | ||||
|             data-type="number" | ||||
|             caption="Total" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="avg_durasi_response" | ||||
|             data-type="number" | ||||
|             caption="Rata-Rata" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="min_durasi_response" | ||||
|             data-type="number" | ||||
|             caption="Max" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="data-waktu" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="max_durasi_response" | ||||
|             data-type="number" | ||||
|             caption="Min" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="data-waktu" | ||||
|           /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_durasi_response" data-type="number" | ||||
|             caption="Total" css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" | ||||
|             caption="Rata-Rata" css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Max" | ||||
|             css-class="custom-table-column" cell-template="data-waktu" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Min" | ||||
|             css-class="custom-table-column" cell-template="data-waktu" /> | ||||
|         </DxColumn> | ||||
|         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_diatas_sla_response" | ||||
|             data-type="number" | ||||
|             caption=">SLA" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_dibawah_sla_response" | ||||
|             data-type="number" | ||||
|             caption="≤SLA" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" | ||||
|             caption=">SLA" css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" | ||||
|             caption="≤SLA" css-class="custom-table-column" /> | ||||
|         </DxColumn> | ||||
|       </DxColumn> | ||||
|       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column"> | ||||
|         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column"> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_durasi_recovery" | ||||
|             data-type="number" | ||||
|             caption="Total" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="avg_durasi_recovery" | ||||
|             data-type="number" | ||||
|             caption="Rata-Rata" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="max_durasi_recovery" | ||||
|             data-type="number" | ||||
|             caption="Max" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="data-waktu" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="min_durasi_recovery" | ||||
|             data-type="number" | ||||
|             caption="Min" | ||||
|             css-class="custom-table-column" | ||||
|             cell-template="data-waktu" | ||||
|           /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_durasi_recovery" data-type="number" | ||||
|             caption="Total" css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" | ||||
|             caption="Rata-Rata" css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max" | ||||
|             css-class="custom-table-column" cell-template="data-waktu" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min" | ||||
|             css-class="custom-table-column" cell-template="data-waktu" /> | ||||
|         </DxColumn> | ||||
|         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column"> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_diatas_sla_recovery" | ||||
|             data-type="number" | ||||
|             caption=">SLA" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn | ||||
|             :width="150" | ||||
|             alignment="center" | ||||
|             data-field="total_dibawah_sla_recovery" | ||||
|             data-type="number" | ||||
|             caption="≤SLA" | ||||
|             css-class="custom-table-column" | ||||
|           /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" | ||||
|             caption=">SLA" css-class="custom-table-column" /> | ||||
|           <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" | ||||
|             caption="≤SLA" css-class="custom-table-column" /> | ||||
|         </DxColumn> | ||||
|       </DxColumn> | ||||
|  | ||||
|       <DxSummary> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="Total" | ||||
|           show-in-column="no" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_selesai" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}%" | ||||
|           column="persen_selesai" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_inproses" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}%" | ||||
|           column="persen_inproses" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_durasi_response" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="avg_durasi_response" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="min_durasi_response" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="max_durasi_response" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_diatas_sla_response" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_dibawah_sla_response" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_durasi_recovery" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="avg_durasi_recovery" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="min_durasi_recovery" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="max_durasi_recovery" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_diatas_sla_recovery" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem | ||||
|           summary-type="sum" | ||||
|           display-format="{0}" | ||||
|           column="total_dibawah_sla_recovery" | ||||
|           css-class="text-white" | ||||
|         /> | ||||
|         <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_selesai" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}%" column="persen_selesai" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_inproses" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}%" column="persen_inproses" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_response" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="avg_durasi_response" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="min_durasi_response" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="max_durasi_response" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_response" | ||||
|           css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_response" | ||||
|           css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_recovery" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="avg_durasi_recovery" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="min_durasi_recovery" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="max_durasi_recovery" css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_recovery" | ||||
|           css-class="text-white" /> | ||||
|         <DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_recovery" | ||||
|           css-class="text-white" /> | ||||
|       </DxSummary> | ||||
|  | ||||
|       <template #data-waktu="{ data }"> | ||||
| @@ -348,9 +115,11 @@ | ||||
|           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }} | ||||
|         </p> | ||||
|       </template> | ||||
|  | ||||
|       <template #percent="{ data }"> | ||||
|         <p>{{ data.text }}%</p> | ||||
|       </template> | ||||
|  | ||||
|       <template #cell-left="{ data }"> | ||||
|         <p class="text-left"> | ||||
|           {{ data.text }} | ||||
| @@ -378,15 +147,15 @@ import { | ||||
|   DxSummary, | ||||
|   DxTotalItem | ||||
| } from 'devextreme-vue/data-grid' | ||||
| import { jsPDF } from 'jspdf' | ||||
| import { jsPDF } from 'jspdf ' | ||||
| 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 { Workbook }  from 'exceljs' | ||||
| import { useQuery } from '@vue/apollo-composable' | ||||
| import { queries } from '@/utils/graphql' | ||||
| import { queries } from '@/utils /graphql' | ||||
| const position = { of: '#data' } | ||||
| const showIndicator = ref(true) | ||||
| const showInd icator = ref(true) | ||||
| const shading = ref(true) | ||||
| const showPane = ref(true) | ||||
|  | ||||
| @@ -500,3 +269,4 @@ const filterData = (params: any) => { | ||||
|   }) | ||||
| } | ||||
| </script> | ||||
| @/utils/api/graphql | ||||
		Reference in New Issue
	
	Block a user