influence/components/home/dashboard/layout02/user/layout02UserWidgetS.vue

<template>
  <ul class="data--list--content--modal">
    <li
      v-for="(item, index) in props.items"
      :key="`user-widget-${index}`"
      :class="item.level"
    >
      <h2>
        <span>
          {{ item.tenantName }}
        </span>
      </h2>
      <div class="data--column">
        <div class="percent">
          {{ item.perSubscriber }}<i class="unit">%</i>
        </div>
        <div class="data--bar--chart">
          <div class="data--bar--wrap">
            <div
              class="data--bar--current"
              :style="{width:item.perSubscriber + '%'}"
            >
              {{ toRoundFix(item.curSubscriber, 0) }}/{{ item.maxSubscriber }}
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup>
  /***********************
   *     import
   ************************/
  import { useI18n } from "vue-i18n"
  import apiUrl from '@/composables/useApi';
  import useAxios from '@/composables/useAxios';
  import useUtil from '@/composables/useUtil';

  /***********************
   *     plugins inject
   ************************/
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp()

  // props
  const props = defineProps({
    items:  {
      type: Array,
      default: () => []
    },
  })

  // 참조가능 데이터 설정
  defineExpose({})

  // 발신 이벤트 선언
  const emit = defineEmits([]);
  const i18n = useI18n();
  /***********************
   *     data & created
   ************************/

  /***********************
   *     Methods
   ************************/
  const toRoundFix = (data, digit) => parseFloat(data).toFixed(digit);
</script>