influence/components/home/dashboard/layout01/core/layout01CoreWidgetM.vue

<template>
  <div class="inner--content">
    <ul
      v-if="props.items && props.items.length > 0"
      class="core--card"
    >
      <li
        v-for="(item, index) in props.items"
        :key="`core-widget-${index}`"
        :class="getLevelClass(item.connect, item.level)"
      >
        <div>
          <div class="card--header">
            <h2>{{ item.neName }}</h2>
            <v-btn
              class="more--btn"
              flat
              @click="$emit('more', item)"
            />
          </div>
          <div class="card--body">
            <ul>
              <li>
                <span :class="getBodyStatusClass(item.connect)">STATUS</span>
                <!-- <span>{{ item.connect.isConnected ? 'ACTIVE' : item.connect.reason.join(',') }}</span> -->
                <span>{{ item.connect.isConnected ? 'ACTIVE' : '' }}</span>
              </li>
              <li
                v-for="(kpi, idx) in item.kpiItems"
                :key="`core-widget-${index}-${idx}`"
              >
                <span :class="getBodyLevelClass(kpi.val)">{{ kpi.label }}</span>
                <span :class="getBodyLevelClass(kpi.val)">{{ toRoundFix(kpi.val, 2) }}%</span>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
    <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>