influence/components/home/dashboard/layout01/user/layout01User.vue

<template>
  <div>
    <div :class="widgetSize === 'M' ? 'user--list--wrap user--list--bar--graph' : 'user--list--bar--graph'">
      <!-- 헤더 영역 : S -->
      <div class="inner--header--wrap">
        <h2 class="inner--component--title none--after">
          가입자
        </h2>

        <pagination
          :page-obj="pageObj"
          @chg_page="fnChgPage"
        >
          <template
            v-if="userItems && userItems.length > 0"
            #rightArea
          >
            <div class="btn--list--content">          
              <v-btn
                class="custom-btn mini all--view--btn"
                @click="fnUserTotalClick"
              >
                <i class="icon" />전체보기
              </v-btn>
            </div>
            <div class="shape--selector">
              <v-btn
                class="custom-btn mini card--type--btn"
                :class="{ on: showType === 'CARD' }"
                @click="fnChangeShowType('CARD')"
              />
              <v-btn
                class="custom-btn mini list--type--btn"
                :class="{ on: showType === 'TABLE' }"
                @click="fnChangeShowType('TABLE')"
              />
            </div>
          </template>
        </pagination>             
      </div>  
      <!-- 헤더 영역 : E -->

      <!-- Contents 영역 : S -->
      <div class="user--list--contents">
        <WidgetM
          v-if="showType === 'CARD' && widgetSize === 'M'"
          :items="userItems"
        />
        <WidgetS
          v-if="showType === 'CARD' && widgetSize === 'S'"
          :items="userItems"
        />
        <WidgetT
          v-if="showType === 'TABLE'" 
          :items="userItems"
          :page-obj="pageObj"
        />
      </div>
      <!-- Contents 영역 : E -->
    </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 pagination from "@/components/home/dashboard/common/pagination.vue"
  import WidgetM from "@/components/home/dashboard/layout01/user/layout01UserWidgetM.vue"
  import WidgetS from "@/components/home/dashboard/layout01/user/layout01UserWidgetS.vue"
  import WidgetT from "@/components/home/dashboard/layout01/user/layout01UserWidgetT.vue"
  import testJson from "../../test.json"

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

  // props
  const props = defineProps({
    config: {
      type: Object,
      default: () => {}
    },
    intervalTime: {
      type: Number,
      default: 5000
    }
  })

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

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

  /***********************
   *     data & created
   ************************/
  // 카드 / 리스트 구분
  const showType = ref('CARD');  // CARD or TABLE

  // TenantName
  const tenantName = computed(() => useAuthStore().getTenantName);

  // 설정된 위젯 사이즈 : M or S
  const widgetSize = computed(() => props.config?.widgetSize || 'M');
  // 위젯 사이즈별 표시 갯수
  const widgetListLimit = ref({
    S: 16, M: 8, T: 10,
  });
  // 페이징 정보
  const pageObj = ref( {
    page: 1, // 현재 페이지
    pageSize: widgetListLimit.value[widgetSize.value], // 테이블 조회 데이터 개수
    totalCnt: 0, // 전체 페이지
  })

  // 가입자 리스트
  const userItems = ref([]);


  /***********************
   *     Methods
   ************************/
  const fnReset = () => {
    userItems.value = [];
    showType.value = 'CARD';
    pageObj.value.page = 1;
    pageObj.value.pageSize = widgetListLimit.value[widgetSize.value];
    pageObj.value.totalCnt = 0;
  }

  function fnGetUserList() {
    const params = {
      tenantName: tenantName.value,
    }

    useAxios().post(apiUrl.getUserList, params).then((res) => {
      const {resCode, resMsg,  data} = res.data;

      if(resCode == 200) {
        // 테스트를 위한 테스트 코드 (삭제 필수)
        // fnParseData([...(data?.items || []), ...testJson.user.data.items])

        fnParseData(data.items || [])

        $log.debug("[dashboard][fnGetUserList][success]")
      } else {
        $log.debug("[dashboard][fnGetUserList][error]", `[${resCode}] ${resMsg}`);
      }
    }).catch((error)=>{
      // 테스트를 위한 테스트 코드 (삭제 필수)
      // fnParseData([...testJson.user.data.items])

      $log.debug("[dashboard][fnGetUserList][error]", error)
      useErrorHandler().fnSetCommErrorHandle(error, fnGetUserList)
      // 테스트 데이터 파싱
    }).finally(()=>{
      $log.debug("[dashboard][fnGetUserList][finished]")
    }) 
  }

  /**
   * 데이터 가공
   */
  function fnParseData(items = []) {
    userItems.value = [];

    if(!items || items.length < 1) {
      pageObj.value.totalCnt = 0;
      return;
    }

    let temp = [];

    // 정렬 적용
    temp = items.sort((a, b) => {
      const perA = fnGetPercentValue(a.maxSubscriber, a.curSubscriber);
      const perB = fnGetPercentValue(b.maxSubscriber, b.curSubscriber);
      return +perA < +perB ? 1 : (+perA > +perB ? -1 : 0);
    })

    // 페이징 적용
    pageObj.value.totalCnt = temp.length;
    temp = temp.filter((data, index) =>(index >= ((pageObj.value.page - 1) * pageObj.value.pageSize) && index < (pageObj.value.page * pageObj.value.pageSize)));


    // 데이터 가공
    userItems.value = temp.map((item, index) => {

      //percent 
      const { maxSubscriber, curSubscriber } = item;
      const perSubscriber = fnGetPercentValue(maxSubscriber, curSubscriber);

      //심각도 
      const level = fnGetLevel(perSubscriber);

      //차트 데이터 
      const chartData = {
        datasets: [
            {
              data: [curSubscriber , maxSubscriber - curSubscriber],
              backgroundColor: fnGetChartColorSet(level),
              borderWidth: 0,
            }
          ]
      }

      //테이블 사용량 class
      const tablePercentClass = fnGetTablePercentClass(perSubscriber);

      return {
        ...item,
        no: index+1,
        level,
        perSubscriber,
        chartData,
        tablePercentClass
      }
    })
  }

  /** make percent data */
  const fnGetPercentValue = (max, curr) => {
    return useUtil.toRoundFix((curr / max) * 100, 0);
  }

  const fnGetLevel = (per) => {
    if(per >= 95) return 'critical';        //critical
    else if(per >= 90) return 'major';      //major
    else if(per >= 85) return 'minor';      //minor
    else return 'normal';                   //normal
  }

  /** 차트 데이터 > 컬러셋  */
  const fnGetChartColorSet = (level) => {
    if(level == 'critical') return ['#f00','#EAEAEA'];       //critical
    else if(level == 'major') return ['#C96103','#EAEAEA'];     //major
    else if(level == 'minor') return ['#DDA405','#EAEAEA'];     //minor
    else return ['#2D8CFA','#EAEAEA'];                          //normal
  }

  /** 테이블 > 사용량 class */
  const fnGetTablePercentClass = (level) => {
    if(level == 'critical') return 'user--list--critical';         //critical
    else if(level == 'major') return 'user--list--major';     //major
    else if(level == 'minor') return 'user--list--minor';      //minor
    else return 'user--list--normal';      
  }

  /** 카드형/목록형 Change Event */
  function fnChangeShowType(type) {
    pageObj.value.page = 1;
    pageObj.value.totalCnt = 0;

    if(type === 'TABLE') pageObj.value.pageSize = widgetListLimit.value.T;
    else pageObj.value.pageSize = widgetListLimit.value[widgetSize.value];

    fnGetUserList();

    showType.value = type;
  }

  /** 전체보기 open */
  function fnUserTotalClick() {
    const url = window.location.origin+'/view/home/user'
    const popupWindow = window.open(url, '_blank', 'width=' + screen.width + ',height=' + screen.height + ',fullscreen=yes')
    
    if (popupWindow) {
      popupWindow.focus()
    }
  }
  
  /**
   * 페이지 변경
   */
  function fnChgPage(page){
    pageObj.value.page = page
    fnGetUserList();
  }


  onMounted(() => fnGetUserList())
  // 위젯사이즈 변경 watch
  watch(() => widgetSize.value, () => {
    fnReset();
    fnGetUserList();
  }, {deep: true})

</script>