hafifierahman
103 lines
3.7 KiB
Vue
103 lines
3.7 KiB
Vue
<template>
|
|
<div class="mb-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mt-4">
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8">
|
|
<div class="mb-3 mx-auto justify-center flex">
|
|
<h3 class="text-3xl font-bold text-gray-500">Pembiayaan Terkumpul</h3>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<h3 class="bg-blue-300 uppercase font-bold text-black px-2 py-2 rounded mr-2">Actual : {{ this.pembiayaanterkumpul }}</h3>
|
|
<h3 class="bg-blue-300 uppercase font-bold text-black px-2 py-2 rounded">Bajet : {{ this.pembiayaanbajet }}</h3>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8">
|
|
<div class="mb-3 mx-auto justify-center flex">
|
|
<h3 class="text-3xl font-bold text-gray-500">Penebusan Terkumpul</h3>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<h3 class="bg-blue-300 uppercase font-bold text-black px-2 py-2 rounded mr-2">Actual : {{ this.penebusanterkumpul }}</h3>
|
|
<h3 class="bg-blue-300 uppercase font-bold text-black px-2 py-2 rounded">Bajet : {{ this.penebusanbajet }}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8">
|
|
<div class="mb-3 mx-auto justify-center flex">
|
|
<h3 class="text-3xl font-bold text-gray-500">Keuntungan Terkumpul</h3>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<h3 class="bg-blue-300 uppercase font-bold text-black px-2 py-2 rounded mr-2">Actual : {{ this.keuntunganterkumpul }}</h3>
|
|
<h3 class="bg-blue-300 uppercase font-bold text-black px-2 py-2 rounded">Bajet : {{ this.keuntunganbajet }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
props:{
|
|
kodcaw: String
|
|
},
|
|
data(){
|
|
return{
|
|
pembiayaanterkumpul:0,
|
|
pembiayaanbajet:0,
|
|
penebusanterkumpul:0,
|
|
penebusanbajet:0,
|
|
keuntunganterkumpul:0,
|
|
keuntunganbajet:0
|
|
}
|
|
},
|
|
created() {
|
|
this.getDataPembiayaan()
|
|
this.getDataPenebusan()
|
|
this.getDataKeuntungan()
|
|
},
|
|
methods: {
|
|
getDataPembiayaan() {
|
|
this.axios.get('http://localhost:8000/admin/pembiayaanTahunan', {
|
|
params: {
|
|
kodcaw: this.$props.kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.pembiayaanterkumpul = formatter.format(response.data[0].total);
|
|
this.pembiayaanbajet = formatter.format(response.data[0].bajet);
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getDataPenebusan(){
|
|
this.axios.get('http://localhost:8000/admin/penebusanTahunan', {
|
|
params: {
|
|
kodcaw: this.$props.kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.penebusanterkumpul = formatter.format(response.data[0].total);
|
|
this.penebusanbajet = formatter.format(response.data[0].bajet);
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getDataKeuntungan(){
|
|
this.axios.get('http://localhost:8000/admin/keuntunganTahunan', {
|
|
params: {
|
|
kodcaw: this.$props.kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.keuntunganterkumpul = formatter.format(response.data[0].total);
|
|
this.keuntunganbajet = formatter.format(response.data[0].bajet);
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script> |