defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Filters and Type components to Table_45.vue, Table_21.vue, Table_25.vue, Table_26.vue, Table_27.vue, Table_28.vue, Table_30.vue, Table_33.vue, Table_34.vue, Table_35.vue, Table_22.vue, Table_23.vue, Table_24.vue, Table_29.vue, and Table_31.vue

Browse Source
This commit is contained in:
probdg 2024-02-09 20:41:06 +07:00
parent 704cf74720
commit 2e4eb3b6b2
50 changed files with 278 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Form/FiltersType/Type2.vue
View File

@ -1,7 +1,7 @@
<!-- <script setup lang="ts">
<script setup lang="ts">
import Select from '@/components/Select.vue'
import { selectedUid, selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@ -10,29 +10,45 @@ const uppp = ref({ id: 0, name: up3Placholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const regional = ref({ id: 0, name: regionalPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
regional: regional.value,
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: ''
})
const setRegional = (value: any) => {
regional.value = value;
selectedUid(value);
uid.value = { id: 0, name: uidPlaceholder };
data.value.regional = value;
};
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUp3Ulp(value);
data.value.posko = value;
};
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>
@ -68,6 +84,5 @@ const setUlp = (value: any) => {
<Select :data="years" placeholder="Pilih Tahun" />
</div>
</div>
</template> -->
</template>
<template></template>

17
src/components/Form/FiltersType/Type3.vue
View File

@ -1,31 +1,39 @@
<!-- <script setup lang="ts">
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import { ref } from 'vue';
fetchData();
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const emit = defineEmits(['update:filters'])
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: ''
})
const setUid = (value: any) => {
uid.value = value;
selectedUid(value);
uppp.value = { id: 0, name: up3Placeholder };
data.value.uid = value;
};
const setUp3 = (value: any) => {
uppp.value = value;
selectedUp3Ulp(value);
ulp.value = { id: 0, name: ulpPlaceholder };
data.value.up3 = value;
};
const setUlp = (value: any) => {
ulp.value = value;
selectedUlp(value);
data.value.posko = value;
};
</script>
@ -56,5 +64,4 @@ const setUlp = (value: any) => {
}
" />
</div>
</template> -->
<template></template>
</template>

67
src/components/Form/FiltersType/Type6.vue
View File

@ -1,31 +1,51 @@
<!-- <script setup lang="ts">
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
<script setup lang="ts">
import InputNumber from '@/components/Form/InputNumber.vue'
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
import { useTotalReport } from '@/stores/totalReport';
fetchData();
const changeMinReport = (value: any) => {
useTotalReport().setDataMin(value)
}
const changeMaxReport = (value: any) => {
useTotalReport().setDataMax(value)
}
import { onMounted, ref } from 'vue';
const emit = defineEmits(['update:filters'])
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
const uppp = ref({ id: 0, name: up3Placeholder });
const uid = ref({ id: 0, name: uidPlaceholder });
const ulp = ref({ id: 0, name: ulpPlaceholder });
const data = ref({
uid: uid.value,
up3: uppp.value,
posko: ulp.value,
periode: '',
minReport: useTotalReport().getDataMin() ? useTotalReport().getDataMin() : 1,
maxReport: useTotalReport().getDataMax()? useTotalReport().getDataMax() : 1
})
///Can di ganti masih ka store
const changeMinReport = (value: any) => {
useTotalReport().setDataMin(value)
}
const changeMaxReport = (value: any) => {
useTotalReport().setDataMax(value)
}
onMounted(() => {
emit('update:filters', data.value)
fetchUid()
})
</script>
<template>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
>Unit Pelaksanaan Pelayanan Pelanggan:</label
>
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@ -33,13 +53,13 @@ import { useTotalReport } from '@/stores/totalReport';
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
</div>
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
</div>
@ -49,9 +69,8 @@ import { useTotalReport } from '@/stores/totalReport';
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
<InputNumber :value="1" @change="changeMinReport($event.target.value)" />
<small class="flex items-center">s/d</small>
<InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
<InputNumber :value="1" @change="changeMaxReport($event.target.value)" />
</div>
</div>
</template> -->
</template>
<template></template>

121
src/components/Form/FiltersType/reference.ts
View File

@ -6,54 +6,85 @@ import { useRegionStore } from '@/stores/region'
import { useUlpStore } from '@/stores/ulp'
interface Item {
id: number;
id: any;
name: any;
}
const months =[
{id:1, name: 'Januari'},
{id:2, name: 'Februari'},
{id:3, name: 'Maret'},
{id:4, name: 'April'},
{id:5, name: 'Mei'},
{id:6, name: 'Juni'},
{id:7, name: 'Juli'},
{id:8, name: 'Agustus'},
{id:9, name: 'September'},
{id:10, name: 'Oktober'},
{id:11, name: 'November'},
{id:12, name: 'Desember'},
const months = [
{ id: 1, name: 'Januari' },
{ id: 2, name: 'Februari' },
{ id: 3, name: 'Maret' },
{ id: 4, name: 'April' },
{ id: 5, name: 'Mei' },
{ id: 6, name: 'Juni' },
{ id: 7, name: 'Juli' },
{ id: 8, name: 'Agustus' },
{ id: 9, name: 'September' },
{ id: 10, name: 'Oktober' },
{ id: 11, name: 'November' },
{ id: 12, name: 'Desember' },
]
// create 4 year back array
const year = new Date().getFullYear();
const years =ref<Item[]>([]);
const years = ref<Item[]>([]);
for (let i = 0; i < 5; i++) {
years.value.push({id:year-i, name: year-i})
years.value.push({ id: year - i, name: year - i })
}
const timeout = ref()
const itemsUid = ref<Item[]>([]);
const itemsUp3 = ref<Item[]>([]);
const itemsPosko = ref<Item[]>([]);
const itemsUlp = ref<Item[]>([]);
const itemsUlp = ref<Item[]>([]);
const itemsRegional = ref<Item[]>([]);
const itemsMedia = ref<Item[]>([]);
const fetchRegional = () => {
itemsRegional.value = [
{ id: "1", name: "Wilayah Sumatera" },
{ id: "2", name: "Wilayah Jawa Bali" },
{ id: "3", name: "Wilayah Kalimantan" },
{ id: "4", name: "Wilayah Sulawesi" },
{ id: "5", name: "Wilayah Nusa Tenggara" },
{ id: "6", name: "Wilayah Maluku Papua" },
]
}
const fetchStatus = (data : any) => {
const status = [
{"id": "8", "name": "Selesai"},
{"id": "7", "name": "Nyala"},
{"id": "6", "name": "Pengalihan"},
{"id": "5", "name": "Dialihkan"},
{"id": "4", "name": "Dalam Pengerjaan"},
{"id": "3", "name": "Dalam Perjalanan"},
{"id": "2", "name": "Penugasan Regu"},
{"id": "1", "name": "lapor"}
]
const filteredStatus = status.find(item => item.id == data);
const name = filteredStatus ? filteredStatus.name : null;
return name;
}
const fetchMedia = () => {
itemsMedia.value = [
{ id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile" },
{ id: "Twitter", name: "Twitter" },
{ id: "PLN Mobile", name: "PLN Mobile" },
{ id: "Media Massa", name: "Media Massa" },
{ id: "Live Chat Website", name: "Live Chat Website" },
{ id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
{ id: "Instagram", name: "Instagram" },
{ id: "Facebook", name: "Facebook" },
{ id: "Email", name: "Email" },
{ id: "EMS", name: "EMS" },
{ id: "Datang ke Kantor", name: "Datang ke Kantor" },
{ id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
{ id: "Call PLN 123", name: "Call PLN 123" },
]
}
// Fetch data from the API using Axios
const fetchUid = async () => {
try {
const res = await getUid()
itemsUid.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
};
const fetchMedia = async () => {
try {
const res = await getUid()
itemsMedia.value = res.data.map((item: any) => (
itemsUid.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
@ -62,7 +93,7 @@ const fetchMedia = async () => {
} catch (error) {
console.error('Error fetching data:', error);
}
}
};
const fetchDataUp3 = async (uid: number) => {
try {
@ -91,18 +122,18 @@ const fetchDataUlp = async (up3: number) => {
const fetchDataPosko = async (up3: number) => {
clearTimeout(timeout.value)
timeout.value = setTimeout(async () => {
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
},300);
try {
const res = await getPosko(up3)
itemsPosko.value = res.data.map((item: any) => (
{
id: item.id,
name: item.nama,
}
));
} catch (error) {
console.error('Error fetching data:', error);
}
}, 300);
};
const selectedUid = (value: any) => {
useRegionStore().setData(value.id)
@ -125,4 +156,4 @@ const selectedUlp = (value: any) => {
useUlpStore().setData(value.id)
}
export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp,fetchMedia, fetchUid, itemsUid, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};
export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

2
src/components/Pages/Gangguan/Table_1.vue
View File

@ -381,7 +381,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
const showData = () => {
showDetail.value = true
}
// filters handler
const filters = ref()
</script>

2
src/components/Pages/Gangguan/Table_10.vue
View File

@ -77,6 +77,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

3
src/components/Pages/Gangguan/Table_11.vue
View File

@ -1,5 +1,6 @@
<!-- Rekapitulasi Gangguan Per Posko -->
<template>
<div id="data">
<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"
@ -148,6 +149,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_12.vue
View File

@ -75,6 +75,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { onMounted ,ref} from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_13.vue
View File

@ -75,6 +75,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type9 from '@/components/Form/FiltersType/Type9.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_14.vue
View File

@ -25,6 +25,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_15.vue
View File

@ -25,6 +25,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_16.vue
View File

@ -140,6 +140,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_17.vue
View File

@ -65,6 +65,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.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'

2
src/components/Pages/Gangguan/Table_18.vue
View File

@ -63,6 +63,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_19.vue
View File

@ -43,6 +43,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type18 from '@/components/Form/FiltersType/Type18.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

81
src/components/Pages/Gangguan/Table_2.vue
View File

@ -1,4 +1,10 @@
<template>
<Filters @run-search="() => filterData(filters)" class="mb-4">
<Type6 @update:filters="(value) => {
filters = value
}
" />
</Filters>
<div id="data">
<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"
@ -8,19 +14,12 @@
<DxPaging :page-size="5" :enabled="true" />
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
:show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
<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" />
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
:calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
data-type="number"
caption="No" />
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
caption="No Laporan" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
@ -35,8 +34,8 @@
caption="Durasi Response Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
caption="Durasi Recovery Time" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
caption="Status" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
caption="IDPEL/NO METER" cell-template="data" />
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
@ -165,6 +164,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type6 from '@/components/Form/FiltersType/Type6.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
@ -173,12 +174,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
import InputText from '@/components/InputText.vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
import { useDateStore } from '@/stores/date';
import { useSearchStore } from '@/stores/filtersAction';
import { usePostsStore } from '@/stores/posts';
import { useRegionStore } from '@/stores/region';
import { useUp3Store } from '@/stores/up3';
import { useTotalReport } from '@/stores/totalReport';
const position = { of: '#data' };
const showIndicator = ref(true);
const shading = ref(true);
@ -200,7 +196,7 @@ const closeDetail = () => {
showDetail.value = false
}
const loadingVisible = ref(true)
const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI =gql`
const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
daftarGangguanMelaporLebihDariSatuKali(
minJmlLapor: $minJmlLapor
@ -227,26 +223,23 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
waktu_response
}
}`;
const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
minJmlLapor: 1,
maxJmlLapor: 1,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
minJmlLapor: 1,
maxJmlLapor: 1,
dateFrom: new Date().toISOString().slice(0, 10),
dateTo: new Date().toISOString().slice(0, 10),
posko: "",
idUid: 0,
idUp3: 0,
})
const reportButton = useSearchStore()
const detected = computed(() => reportButton.isTriggerChange)
watch(detected, () => {
const dateValue = useDateStore().getDateValue().split(' s/d ');
const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
const minJmlLapor = useTotalReport().getDataMin()
const maxJmlLapor = useTotalReport().getDataMax()
const filterData = (data: any) => {
const dateValue = data.periode.split(' s/d ');
const posko = data.posko ? data.posko.id : ""
const up3 = data.up3 ? data.up3.id : 0
const uid = data.uid ? data.uid.id : 0
const minJmlLapor = data.minReport
const maxJmlLapor = data.maxReport
refetch({
minJmlLapor,
@ -258,7 +251,7 @@ watch(detected, () => {
idUp3: up3
})
onResult(queryResult => {
if(queryResult.data != undefined){
if (queryResult.data != undefined) {
data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
loadingVisible.value = false
}
@ -269,11 +262,7 @@ watch(detected, () => {
onError(error => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-6',
})
})
}
const filters = ref()
</script>

2
src/components/Pages/Gangguan/Table_20.vue
View File

@ -44,6 +44,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

10
src/components/Pages/Gangguan/Table_3.vue
View File

@ -1,4 +1,5 @@
<template>
<div id="data">
<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=""
@ -47,6 +48,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import { useFiltersStore } from '@/stores/filters'
@ -148,10 +151,5 @@ watch(detected, () => {
console.log(error)
})
})
onMounted(() => {
const filters = useFiltersStore()
filters.setConfig({
type: 'type-7',
})
})
const filters = ref()
</script>

2
src/components/Pages/Gangguan/Table_4.vue
View File

@ -49,6 +49,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type7 from '@/components/Form/FiltersType/Type7.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

3
src/components/Pages/Gangguan/Table_5.vue
View File

@ -1,4 +1,5 @@
<template>
<div id="data">
<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=""
@ -47,6 +48,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_6.vue
View File

@ -38,6 +38,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type16 from '@/components/Form/FiltersType/Type16.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_7.vue
View File

@ -47,6 +47,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Gangguan/Table_8.vue
View File

@ -67,6 +67,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'

2
src/components/Pages/Gangguan/Table_9.vue
View File

@ -116,6 +116,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_21.vue
View File

@ -48,6 +48,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_22.vue
View File

@ -49,6 +49,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type10 from '@/components/Form/FiltersType/Type10.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_23.vue
View File

@ -48,6 +48,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_24.vue
View File

@ -49,6 +49,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_25.vue
View File

@ -54,6 +54,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_26.vue
View File

@ -48,6 +48,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_27.vue
View File

@ -49,6 +49,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_28.vue
View File

@ -52,6 +52,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_29.vue
View File

@ -73,6 +73,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type13 from '@/components/Form/FiltersType/Type13.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_30.vue
View File

@ -76,6 +76,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_31.vue
View File

@ -76,6 +76,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type13 from '@/components/Form/FiltersType/Type13.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_32.vue
View File

@ -200,6 +200,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type13 from '@/components/Form/FiltersType/Type13.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_33.vue
View File

@ -72,6 +72,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_34.vue
View File

@ -24,6 +24,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Keluhan/Table_35.vue
View File

@ -64,6 +64,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type8 from '@/components/Form/FiltersType/Type8.vue'
import { onMounted, ref } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

4
src/components/Pages/Monalisa/Table_36.vue
View File

@ -38,6 +38,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'
@ -57,8 +59,6 @@ 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 { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
import { useDateStore } from '@/stores/date'
import { useSearchStore } from '@/stores/filtersAction'
import { usePostsStore } from '@/stores/posts'
import { useRegionStore } from '@/stores/region'

2
src/components/Pages/Monalisa/Table_37.vue
View File

@ -40,6 +40,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_38.vue
View File

@ -40,6 +40,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_39.vue
View File

@ -40,6 +40,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_40.vue
View File

@ -177,6 +177,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_41.vue
View File

@ -24,6 +24,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_42.vue
View File

@ -37,6 +37,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_43.vue
View File

@ -37,6 +37,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_44.vue
View File

@ -25,6 +25,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_45.vue
View File

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'

2
src/components/Pages/Monalisa/Table_46.vue
View File

@ -36,6 +36,8 @@
</template>
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type2 from '@/components/Form/FiltersType/Type2.vue'
import { onMounted } from 'vue'
import { useFiltersStore } from '@/stores/filters'
import { DxDataGrid } from 'devextreme-vue'