admin-erahn/resources/js/components/Analisa/Harian copy.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">
            
            <div class="flex flex-nowrap">
            <div class="w-3/4 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" style="width: 75%"> 75%</div>
            </div>
                
                <div class="w-1/4 grid grid-rows-2">
                    <span class="text-sm ml-2 font-bold -mt-0.5">RM 3,066,460.00</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">
                <div class="grid grid-rows-2 ml-1 mt-2 w-1/4">
                    <span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i>  RM {{ gadaianharian }}</span>
                    <span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i>  RM {{ bajetgadaian }} </span>
                </div>
                 <div class="ml-4  text-center w-1/3">
                      <h3 class="text-3xl font-bold -mt-1 text-gray-500">Pembiayaan</h3>
                    <span class="text-base leading-none font-bold text-gray-900 text-center">Disember </span>
                </div>
                 <div class="grid grid-rows-2 ml-2 mt-2  w-2/6 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-else 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 ">
           <div class="flex items-center">
              <div class="flex-shrink-0">
                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ penebusanharian }} / RM {{ bajetpenebusan }}</span>
                 <h3 class="text-base font-normal text-gray-500">Penebusan Hari Ini</h3>
              </div>
              <div v-if="percentpenebusan > 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
                 {{ 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>
              </div>
              <div v-if="percentpenebusan == 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-yellow-500 text-base font-bold">
                 {{ 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>
              </div>
              <div v-else class="ml-5 w-0 flex items-center justify-end flex-1 text-red-500 text-base font-bold">
                 {{ 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>
              </div>
           </div>

            
        </div>
        <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
           <div class="flex items-center">
              <div class="flex-shrink-0">
                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ keuntunganharian }} / RM {{ bajetkeuntungan }}</span>
                 <h3 class="text-base font-normal text-gray-500">Keuntungan Hari Ini</h3>
              </div>
            <div v-if="percentkeuntungan > 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
                 {{ 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>
              </div>
              <div v-if="percentkeuntungan == 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-yellow-500 text-base font-bold">
                 {{ 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>
              </div>
              <div v-else class="ml-5 w-0 flex items-center justify-end flex-1 text-red-500 text-base font-bold">
                 {{ 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>
              </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,
        penebusanharian:0,
        bajetpenebusan:0,
        percentpenebusan:0,
        gadaianharian:0,
        bajetgadai:0,
        percentgadaian:0
		};
	},
    created() {
        this.getDataPembiayaan()
        this.getDataPenebusan()
        this.getDataKeuntungan()
    },
    methods: {
        getDataPembiayaan() {
            this.axios.get(this.$hostname + '/admin/pembiayaanToday', {
            params: {
                kodcaw: this.$props.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
            }).catch(error => {
                console.log(error)
            })
        },
        getDataPenebusan(){
             this.axios.get(this.$hostname + '/admin/penebusanToday', {
            params: {
                kodcaw: this.$props.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
            }).catch(error => {
                console.log(error)
            })
        },
        getDataKeuntungan(){
           this.axios.get(this.$hostname + '/admin/keuntunganToday', {
            params: {
                kodcaw: this.$props.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
            }).catch(error => {
                console.log(error)
            })
        }
    },
    mounted () {
        var channel = this.$pusher.subscribe('gadai-notify');

        channel.bind('trigger-gadai', ({ response }) => {
            // console.log(`${response}`);
            this.getDataPembiayaan()
        });

        var channel = this.$pusher.subscribe('tebus-notify');

        channel.bind('trigger-tebus', ({ response }) => {
            // console.log(`${response}`);
            this.getDataPenebusan()
        });

        var channel = this.$pusher.subscribe('keuntungan-notify');

        channel.bind('trigger-keuntungan', ({ response }) => {
            // console.log(`${response}`);
            this.getDataKeuntungan()
        });
    }
    
}
</script>