hafifierahman
316 lines
16 KiB
Vue
316 lines
16 KiB
Vue
<template>
|
|
<div class="mb-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datareadypemb === false">
|
|
<content-placeholders>
|
|
<content-placeholders-heading :img="true" />
|
|
<content-placeholders-text :lines="3" />
|
|
</content-placeholders>
|
|
</div>
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datareadypemb === true">
|
|
|
|
<div class="mb-3 mx-auto justify-center flex">
|
|
<h3 class="text-3xl font-bold text-gray-500">Pembiayaan</h3>
|
|
</div>
|
|
|
|
<div class="flex flex-nowrap justify-between">
|
|
<div class="xl:w-3/4 2xl:w-3/4 lg:w-2/3 h-4 bg-gray-200 rounded-full">
|
|
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumgadai > 100) ? '100%' : percentcumgadai + '%' }"> {{ this.percentcumgadai }}%</div>
|
|
</div>
|
|
|
|
<div class="xl:w-2/5 2xl:w-1/4 lg:w-1/3 grid grid-rows-2">
|
|
<span class="text-sm ml-2 font-bold -mt-0.5 xs:invisible">RM {{ gadaianremaining }}</span>
|
|
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex pt-2 -mt-2 justify-between">
|
|
<div class="grid grid-rows-2 ml-1 mt-2 lg:w-1/2">
|
|
<div class="flex">
|
|
<span class="text-sm leading-none font-bold text-gray-700x xl:w-2/5 2xl:w-1/4 uppercase"> Harian</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700 mr-2">:</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700">RM {{ gadaianharian }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="text-sm leading-none font-bold text-yellow-700 xl:w-2/5 2xl:w-1/4 uppercase"> Bajet</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700 mr-2">:</span>
|
|
<span class="text-sm leading-none font-bold text-yellow-900"> RM {{ bajetgadaian }} </span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-rows-2 ml-2 mt-2 lg:w-1/3 flex place-content-end">
|
|
<h3 v-if="percentgadaian > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentgadaian.toFixed(2) }}%
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</h3>
|
|
<h3 v-if="percentgadaian == 0" class="text-base font-bold -mt-1 text-yellow-500 flex items-center mx-auto">{{ percentgadaian.toFixed(2) }}%
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
|
</svg>
|
|
</h3>
|
|
<h3 v-if="percentgadaian < 0" class="text-base font-bold -mt-1 text-red-500 flex items-center mx-auto">{{ percentgadaian.toFixed(2) }}%
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</h3>
|
|
<span class="text-xs leading-none font-bold text-gray-900 ml-4">Varians.</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datareadypeny === false">
|
|
<content-placeholders>
|
|
<content-placeholders-heading :img="true" />
|
|
<content-placeholders-text :lines="3" />
|
|
</content-placeholders>
|
|
</div>
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 " v-if="datareadypeny === true">
|
|
|
|
<div class="mb-3 mx-auto justify-center flex">
|
|
<h3 class="text-3xl font-bold text-gray-500">Penebusan</h3>
|
|
</div>
|
|
|
|
<div class="flex flex-nowrap justify-between">
|
|
<div class="xl:w-3/4 2xl:w-3/4 lg:w-2/3 h-4 bg-gray-200 rounded-full">
|
|
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumtebus > 100) ? '100%' : percentcumtebus + '%' }"> {{ percentcumtebus }}%</div>
|
|
</div>
|
|
|
|
<div class="xl:w-2/5 2xl:w-1/4 grid grid-rows-2">
|
|
<span class="text-sm ml-2 font-bold -mt-0.5">RM {{ tebusremaining }}</span>
|
|
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex pt-2 -mt-2 justify-between">
|
|
<div class="grid grid-rows-2 ml-1 mt-2 lg:w-1/2">
|
|
<!-- <span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ penebusanharian }}</span>
|
|
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetpenebusan }} </span> -->
|
|
<div class="flex">
|
|
<span class="text-sm leading-none font-bold text-gray-700 xl:w-2/5 2xl:w-1/4 uppercase"> Harian</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700 mr-2">:</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700">RM {{ penebusanharian }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="text-sm leading-none font-bold text-yellow-700 xl:w-2/5 2xl:w-1/4 uppercase"> Bajet</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700 mr-2">:</span>
|
|
<span class="text-sm leading-none font-bold text-yellow-900"> RM {{ bajetpenebusan }} </span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-rows-2 ml-2 mt-2 lg:1/3 flex place-content-end">
|
|
<h3 v-if="percentpenebusan > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentpenebusan.toFixed(2) }}%
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</h3>
|
|
<h3 v-if="percentpenebusan == 0" class="text-base font-bold -mt-1 text-yellow-500 flex items-center mx-auto">{{ percentpenebusan.toFixed(2) }}%
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
|
</svg>
|
|
</h3>
|
|
<h3 v-if="percentpenebusan < 0" class="text-base font-bold -mt-1 text-red-500 flex items-center mx-auto">{{ percentpenebusan.toFixed(2) }}%
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</h3>
|
|
<span class="text-xs leading-none font-bold text-gray-900 ml-4">Varians.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8" v-if="datareadykeun === false">
|
|
<content-placeholders>
|
|
<content-placeholders-heading :img="true" />
|
|
<content-placeholders-text :lines="3" />
|
|
</content-placeholders>
|
|
</div>
|
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 " v-if="datareadykeun === true">
|
|
|
|
<div class="mb-3 mx-auto justify-center flex">
|
|
<h3 class="text-3xl font-bold text-gray-500">Keuntungan</h3>
|
|
</div>
|
|
|
|
<div class="flex flex-nowrap">
|
|
<div class="xl:w-3/4 2xl:w-3/4 lg:w-2/3 h-4 bg-gray-200 rounded-full">
|
|
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumkeuntungan > 100) ? '100%' : percentcumkeuntungan + '%' }"> {{percentcumkeuntungan}}%</div>
|
|
</div>
|
|
|
|
<div class="xl:w-2/5 2xl:w-1/4 grid grid-rows-2">
|
|
<span class="text-sm ml-2 font-bold -mt-0.5">RM {{ keuntunganremaining }}</span>
|
|
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex pt-2 -mt-2 justify-between">
|
|
<div class="grid grid-rows-2 ml-1 mt-2 lg:w-1/2">
|
|
<!-- <span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ keuntunganharian }}</span>
|
|
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetkeuntungan }} </span> -->
|
|
<div class="flex">
|
|
<span class="text-sm leading-none font-bold text-gray-700 xl:w-2/5 2xl:w-1/4 uppercase"> Harian</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700 mr-2">:</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700">RM {{ keuntunganharian }}</span>
|
|
</div>
|
|
<div class="flex">
|
|
<span class="text-sm leading-none font-bold text-yellow-700 xl:w-2/5 2xl:w-1/4 uppercase"> Bajet</span>
|
|
<span class="text-sm leading-none font-bold text-gray-700 mr-2">:</span>
|
|
<span class="text-sm leading-none font-bold text-yellow-900"> RM {{ bajetkeuntungan }} </span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-rows-2 ml-2 mt-2 lg:w-1/3 flex place-content-end">
|
|
<h3 v-if="percentkeuntungan > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentkeuntungan.toFixed(2) }}%
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</h3>
|
|
<h3 v-if="percentkeuntungan == 0" class="text-base font-bold -mt-1 text-yellow-500 flex items-center mx-auto">{{ percentkeuntungan.toFixed(2) }}%
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" />
|
|
</svg>
|
|
</h3>
|
|
<h3 v-if="percentkeuntungan < 0" class="text-base font-bold -mt-1 text-red-500 flex items-center mx-auto">{{ percentkeuntungan.toFixed(2) }}%
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</h3>
|
|
<span class="text-xs leading-none font-bold text-gray-900 ml-4">Varians.</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
|
|
// props:{
|
|
// kodcaw: String
|
|
// },
|
|
data() {
|
|
return {
|
|
keuntunganharian: 0,
|
|
bajetkeuntungan: 0,
|
|
percentkeuntungan: 0,
|
|
keuntunganremaining: 0,
|
|
percentcumkeuntungan: 0,
|
|
penebusanharian: 0,
|
|
bajetpenebusan: 0,
|
|
percentpenebusan: 0,
|
|
tebusremaining: 0,
|
|
percentcumtebus: 0,
|
|
gadaianharian: 0,
|
|
gadaianremaining: 0,
|
|
bajetgadaian: 0,
|
|
percentgadaian: 0,
|
|
percentcumgadai: 0,
|
|
bulan: '',
|
|
datareadypemb: false,
|
|
datareadypeny: false,
|
|
datareadykeun: false,
|
|
};
|
|
},
|
|
created() {
|
|
this.getDataPembiayaan()
|
|
this.getDataPenebusan()
|
|
this.getDataKeuntungan()
|
|
},
|
|
methods: {
|
|
getDataPembiayaan() {
|
|
this.axios.get(this.$hostname + '/admin/pembiayaanToday', {
|
|
params: {
|
|
kodcaw: this.$kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.gadaianharian = formatter.format(response.data[0].gadaiToday),
|
|
this.bajetgadaian = formatter.format(response.data[0].bajetharian.toFixed(2)),
|
|
this.percentgadaian = response.data[0].percentDiff,
|
|
this.bulan = response.data[0].bulan,
|
|
this.gadaianremaining = formatter.format(response.data[0].remaining.toFixed(2)),
|
|
this.percentcumgadai = (100 - response.data[0].percentcum)
|
|
|
|
if (this.datareadypemb == false)
|
|
this.datareadypemb = true;
|
|
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getDataPenebusan() {
|
|
this.axios.get(this.$hostname + '/admin/penebusanToday', {
|
|
params: {
|
|
kodcaw: this.$kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.penebusanharian = formatter.format(response.data[0].tebusToday),
|
|
this.bajetpenebusan = formatter.format(response.data[0].bajetharian.toFixed(2)),
|
|
this.percentpenebusan = response.data[0].percentDiff,
|
|
this.tebusremaining = formatter.format(response.data[0].remaining.toFixed(2)),
|
|
this.percentcumtebus = (100 - response.data[0].percentcum)
|
|
|
|
if (this.datareadypeny == false)
|
|
this.datareadypeny = true;
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
},
|
|
getDataKeuntungan() {
|
|
this.axios.get(this.$api1 + '/admin/keuntunganToday', {
|
|
params: {
|
|
kodcaw: this.$kodcaw
|
|
}
|
|
}).then(response => {
|
|
this.keuntunganharian = formatter.format(response.data[0].upahToday),
|
|
this.bajetkeuntungan = formatter.format(response.data[0].bajetharian.toFixed(2)),
|
|
this.percentkeuntungan = response.data[0].percentDiff,
|
|
this.keuntunganremaining = formatter.format(response.data[0].remaining.toFixed(2)),
|
|
this.percentcumkeuntungan = (100 - response.data[0].percentcum)
|
|
|
|
if (this.datareadykeun == false)
|
|
this.datareadykeun = true;
|
|
}).catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
var channel = this.$pusher.subscribe('gadai-notify');
|
|
|
|
channel.bind('trigger-gadai', ({
|
|
cawangan
|
|
}) => {
|
|
|
|
if (this.$kodcaw === cawangan)
|
|
this.getDataPembiayaan()
|
|
});
|
|
|
|
var channel = this.$pusher.subscribe('tebus-notify');
|
|
|
|
channel.bind('trigger-tebus', ({
|
|
cawangan
|
|
}) => {
|
|
|
|
if (this.$kodcaw === cawangan)
|
|
this.getDataPenebusan()
|
|
});
|
|
|
|
var channel = this.$pusher.subscribe('keuntungan-notify');
|
|
|
|
channel.bind('trigger-keuntungan', ({
|
|
cawangan
|
|
}) => {
|
|
|
|
if (this.$kodcaw === cawangan)
|
|
this.getDataKeuntungan()
|
|
});
|
|
}
|
|
|
|
}
|
|
</script>
|