dafuweng-saiadmin6.x/saiadmin-artd/src/views/dashboard/console/modules/card-list.vue

<template>
  <ElRow :gutter="20" class="flex">
    <ElCol :sm="12" :md="6" :lg="6">
      <div class="art-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
        <span class="text-g-700 text-sm">{{ $t('console.card.playerRegister') }}</span>
        <ArtCountTo class="text-[26px] font-medium mt-2" :target="statData.player_count" :duration="1300" />
        <div class="flex-c mt-1">
          <span class="text-xs text-g-600">{{ $t('console.card.vsLastWeek') }}</span>
          <span
            class="ml-1 text-xs font-semibold"
            :class="changeClass(statData.player_count_change)"
          >
            {{ formatChange(statData.player_count_change) }}
          </span>
        </div>
        <div
          class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
        >
          <ArtSvgIcon icon="ri:user-add-line" class="text-xl text-theme" />
        </div>
      </div>
    </ElCol>
    <ElCol :sm="12" :md="6" :lg="6">
      <div class="art-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
        <span class="text-g-700 text-sm">{{ $t('console.card.playerCharge') }}</span>
        <ArtCountTo
          class="text-[26px] font-medium mt-2"
          :target="statData.charge_amount"
          :duration="1300"
          :decimals="2"
        />
        <div class="flex-c mt-1">
          <span class="text-xs text-g-600">{{ $t('console.card.vsLastWeek') }}</span>
          <span
            class="ml-1 text-xs font-semibold"
            :class="changeClass(statData.charge_amount_change)"
          >
            {{ formatChange(statData.charge_amount_change) }}
          </span>
        </div>
        <div
          class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
        >
          <ArtSvgIcon icon="ri:money-dollar-circle-line" class="text-xl text-theme" />
        </div>
      </div>
    </ElCol>
    <ElCol :sm="12" :md="6" :lg="6">
      <div class="art-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
        <span class="text-g-700 text-sm">{{ $t('console.card.playerWithdraw') }}</span>
        <ArtCountTo
          class="text-[26px] font-medium mt-2"
          :target="statData.withdraw_amount"
          :duration="1300"
          :decimals="2"
        />
        <div class="flex-c mt-1">
          <span class="text-xs text-g-600">{{ $t('console.card.vsLastWeek') }}</span>
          <span
            class="ml-1 text-xs font-semibold"
            :class="changeClass(statData.withdraw_amount_change)"
          >
            {{ formatChange(statData.withdraw_amount_change) }}
          </span>
        </div>
        <div
          class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
        >
          <ArtSvgIcon icon="ri:bank-card-line" class="text-xl text-theme" />
        </div>
      </div>
    </ElCol>
    <ElCol :sm="12" :md="6" :lg="6">
      <div class="art-card relative flex flex-col justify-center h-35 px-5 mb-5 max-sm:mb-4">
        <span class="text-g-700 text-sm">{{ $t('console.card.playerPlayCount') }}</span>
        <ArtCountTo
          class="text-[26px] font-medium mt-2"
          :target="statData.play_count"
          :duration="1300"
        />
        <div class="flex-c mt-1">
          <span class="text-xs text-g-600">{{ $t('console.card.vsLastWeek') }}</span>
          <span
            class="ml-1 text-xs font-semibold"
            :class="changeClass(statData.play_count_change)"
          >
            {{ formatChange(statData.play_count_change) }}
          </span>
        </div>
        <div
          class="absolute top-0 bottom-0 right-5 m-auto size-12.5 rounded-xl flex-cc bg-theme/10"
        >
          <ArtSvgIcon icon="ri:gamepad-line" class="text-xl text-theme" />
        </div>
      </div>
    </ElCol>
  </ElRow>
</template>

<script setup lang="ts">
  import { fetchStatistics } from '@/api/dashboard'

  const statData = ref({
    player_count: 0,
    player_count_change: 0,
    charge_amount: 0,
    charge_amount_change: 0,
    withdraw_amount: 0,
    withdraw_amount_change: 0,
    play_count: 0,
    play_count_change: 0
  })

  function formatChange(val: number): string {
    if (val > 0) return `+${val}%`
    if (val < 0) return `${val}%`
    return '0%'
  }

  function changeClass(val: number): string {
    if (val > 0) return 'text-success'
    if (val < 0) return 'text-danger'
    return 'text-g-600'
  }

  onMounted(() => {
    fetchStatistics().then((data: any) => {
      statData.value = {
        player_count: data?.player_count ?? 0,
        player_count_change: data?.player_count_change ?? 0,
        charge_amount: data?.charge_amount ?? 0,
        charge_amount_change: data?.charge_amount_change ?? 0,
        withdraw_amount: data?.withdraw_amount ?? 0,
        withdraw_amount_change: data?.withdraw_amount_change ?? 0,
        play_count: data?.play_count ?? 0,
        play_count_change: data?.play_count_change ?? 0
      }
    })
  })
</script>