influence/components/home/dashboard/layout02/core/layout02CoreWidgetS.vue

<template>
  <div class="inner--content">
    <div
      v-if="props.items && props.items.length > 0"
      class="equip--card--wrap"
    >
      <div
        v-for="(item, index) in props.items"
        :key="`core-widget-${index}`"
        class="equip--card"
        :class="getLevelClass(item.connect, item.level)"
      >
        <div class="equip--name">
          <span :title="item.neType">{{ item.neName }}</span>
          <v-btn
            class="custom--btn mini more--btn"
            flat
            @click="$emit('more', item)"
          />
        </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> -->
            <span class="active">{{ item.connect.isConnected ? 'ACTIVE' : '' }}</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>
    <div
      v-else
      class="no--data--card"
    >
      <div class="no--data--contents">
        <h2>데이터가 없습니다.</h2>
      </div>        
    </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';

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

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

  // 참조가능 데이터 설정
  defineExpose({})
  // 발신 이벤트 선언
  const emit = defineEmits(["more"]);

  const i18n = useI18n();
  /***********************
   *     data & created
   ************************/

  /***********************
   *     Methods
   ************************/
  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 'normal'; // green
  }
  // 세부 데이터 STATUS 상태값
  const getBodyStatusClass = (connect) => {
    if(connect.isConnected) return 'normal';
    else return 'critical';
  }
</script>