influence/components/home/dashboard/layout03/core/layout03CoreWidgetM.vue

<template>
  <div>
    <div class="inner--header--wrap">
      <h2
        v-if="totalPage > 0"
        class="inner--component--title none--after"
      >
        장비별 KPI ({{ page || 0 }}/{{ totalPage }})
      </h2>
      <h2 v-else>
        장비별 KPI 
      </h2>
      <p class="inner--component--total">
        Total : <span>{{ props.totalCnt }}</span>
      </p>
    </div>
    <div class="inner--content df--block pt--1rem">
      <swiper 
        :autoplay="{
          delay: 20000,
          disableOnInteraction: false,
        }"
        :loop="true"
        :touch-ratio="0"        
        :slides-per-view="1" 
        :modules="[Autoplay]"
        @slide-change="onSlideChange"
      >
        <swiper-slide
          v-for="(slide, index) in props.items"
          :key="`core-swiper-slide-${index}`"
        >
          <div class="equip--card--wrap">
            <div 
              v-for="(item, idx) in slide"
              :key="`core-swiper-slide-item-${idx}`"
              class="equip--card"
              :class="getLevelClass(item.connect, item.level)"
            >
              <div class="equip--name">
                {{ item.neName }}
              </div>
              <ul class="equip--st">
                <li>
                  <i
                    class="circle"
                    :class="getBodyStatusClass(item.connect)"
                  />
                  <p>STATUS</p>
                  <span class="active">{{ item.connect.isConnected ? 'ACTIVE' : item.connect.reason.join(',') }}</span>
                </li>
                <li
                  v-for="(kpi, idx) in item.kpiItems"
                  :key="`core-widget-${index}-${idx}`"
                >
                  <i
                    class="circle"
                    :class="getBodyLevelClass(kpi.val)"
                  />
                  <p>{{ kpi.label }}</p>
                  <span>{{ toRoundFix(kpi.val, 2) }}%</span>
                </li>
              </ul>
            </div>
          </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 { Navigation, Pagination, Autoplay } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/swiper-bundle.css'

  /***********************
   *     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();
  /***********************
   *     data & created
   ************************/
  const page = ref(1);
  const totalPage  = computed(() => Math.floor(props.totalCnt / 4) + (props.totalCnt % 4 == 0 ? 0 : 1))

  /***********************
   *     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);
  // 레벨 클래스 : CRITICAL, MAJOR , MINOR
  const getLevelClass = (connect, level) => {
    if(!connect.isConnected) return 'discon';
    else if(level === 'CRITICAL') return 'critical';
    else if(level === 'MAJOR') return 'major';
    else if(level === 'MINOR') return 'minor';
    else return 'normal';
  }
  // 세부 데이터 상태값 
  const getBodyLevelClass = (val) => {
    if(val >= 95) return 'critical';  // red
    else if(val >= 90) return 'major';  // brown
    else if(val >= 85) return 'minor';  // yellow
    else return ''; // green
  }
  // 세부 데이터 STATUS 상태값
  const getBodyStatusClass = (connect) => {
    if(connect.isConnected) return 'normal';
    else return 'critical';
  }

</script>