influence/components/home/dashboard/layout03/user/layout03UserWidgetM.vue

<template>
  <div>
    <div class="inner--header--wrap">
      <h2
        v-if="totalPage > 0"
        class="inner--component--title none--after"
      >
        상세 현황 ({{ page }}/{{ totalPage }})
      </h2>
      <h2 v-else>
        상세 현황 
      </h2>
      <p class="inner--component--total">
        Total : <span>{{ props.totalCnt }}</span>
      </p>
    </div>
    <div class="inner--content df--block pt--1rem equip--conmp--wrap">
      <swiper
        :autoplay="{
          delay: 20000,
          disableOnInteraction: false,
        }"
        :loop="true"
        :touch-ratio="0" 
        :space-between="spaceBetween" 
        :slides-per-view="1" 
        :modules="[Autoplay]"
        @slide-change="onSlideChange"
      >
        <swiper-slide
          v-for="(slide, index) in props.items"
          :key="`user-swiper-slide-${index}`"
        >
          <div class="user--list--contents">
            <ul>
              <li 
                v-for="(item, idx) in slide"
                :key="`user-swiper-slide-item-${idx}`"
                :class="item.level"
              > 
                <div class="headers">
                  <div class="title">
                    {{ item.tenantName }}
                  </div>
                </div>
                <div class="chart--box">
                  <Doughnut
                    :data="item.chartData"
                    :options="chartOptions"
                  />
                  <div class="current--value">
                    {{ toRoundFix(item.curSubscriber, 0) }} / {{ toRoundFix(item.maxSubscriber, 0) }}
                  </div>              
                </div>
                <div class="current--value--ps">
                  {{ item.perSubscriber }}<i class="unit">%</i>
                </div>
              </li>        
            </ul>             
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script setup>
  /***********************
   *     import
   ************************/
  import { useI18n } from "vue-i18n"
  import apiUrl from '@/composables/useApi';
  import useAxios from '@/composables/useAxios';
  import useUtil from '@/composables/useUtil';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import {  Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/swiper-bundle.css'
  import { Doughnut } from 'vue-chartjs';
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LineController, LineElement, PointElement, ArcElement, CategoryScale, LinearScale } from 'chart.js';



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

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

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

  // 발신 이벤트 선언
  const emit = defineEmits([""]);
  const i18n = useI18n();

  ChartJS.register(Title,
    Tooltip,
    Legend,
    BarElement,
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    ArcElement,
    LinearScale)

  
  /***********************
   *     data & created
   ************************/
  const page = ref(1);
  const totalPage  = computed(() => Math.floor(props.totalCnt / 8) + (props.totalCnt % 8 == 0 ? 0 : 1))

  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
  const spaceRem = 0.62; // 원하는 rem 값
  const spaceRemPx = spaceRem * remToPx();
  const spaceBetween = spaceRemPx;

  const chartOptions = {    
    responsive: true,
    maintainAspectRatio: false,
    cutout:"75%",    
    rotation: 270, 
    circumference: 180,        

    plugins: {        
      legend: {
        position:'top',
        display: false        
      },
      tooltip: {
        enabled:false        
      }
    }
  }

  /***********************
   *     Methods
   ************************/
  /** Slide onChang Event */
  function onSlideChange(swiper) {
    if(swiper.realIndex != page.value + 1)
      page.value = swiper.realIndex + 1
  }
  const toRoundFix = (data, digit) => parseFloat(data).toFixed(digit);
</script>