unknown
82 lines
3.1 KiB
Vue
82 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<harian-component></harian-component>
|
|
|
|
<div class="w-full flex justify-center items-center">
|
|
<div class="p-2.5 -mt-3 font-bold">TAHUN : </div>
|
|
<select v-model="selected" class="w-1/12 bg-white mb-2 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
|
<option v-for="year in availableYears" :key="year" :value="year">{{ year }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="w-full grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex-shrink-0">
|
|
<h3 class="text-base font-normal text-gray-500">Pembiayaan Bulanan</h3>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto mt-10"><pemb-chart ref="pemb"></pemb-chart></div>
|
|
</div>
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex-shrink-0">
|
|
<h3 class="text-base font-normal text-gray-500">Penyelesaian Pembiayaan Bulanan</h3>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto mt-10"><peny-chart ref="peny"></peny-chart></div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex-shrink-0">
|
|
<h3 class="text-base font-normal text-gray-500">Keuntungan Bulanan</h3>
|
|
</div>
|
|
</div>
|
|
<div class="mx-auto mt-10"><keun-chart ref="keun"></keun-chart></div>
|
|
</div>
|
|
</div>
|
|
|
|
<tahunan-component ref="tahunan"></tahunan-component>
|
|
|
|
<aging-component></aging-component>
|
|
|
|
<bilangan-component ref="bilangan"></bilangan-component>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selected: new Date().getFullYear().toString(),
|
|
}
|
|
},
|
|
created(){
|
|
this.selected = this.$tahun;
|
|
},
|
|
watch: {
|
|
selected: function (val, oldVal) {
|
|
this.settahun(val);
|
|
this.$refs.pemb.getDataPembiayaan();
|
|
this.$refs.peny.getDataPenebusan();
|
|
this.$refs.keun.getDatakeuntungan();
|
|
this.$refs.bilangan.getData();
|
|
this.$refs.tahunan.getDataPembiayaan();
|
|
this.$refs.tahunan.getDataPenebusan();
|
|
this.$refs.tahunan.getDataKeuntungan();
|
|
}
|
|
},
|
|
computed: {
|
|
availableYears() {
|
|
const currentYear = new Date().getFullYear();
|
|
const years = [];
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
years.push(currentYear - i);
|
|
}
|
|
|
|
return years;
|
|
},
|
|
},
|
|
}
|
|
</script> |