Vue3 기초 예제 - 날짜 검색(v-calendar)

Vue3 기초 예제 - Pie Charts(Vue-ECharts)에 v-calendar를 사용하여 날짜 검색 조건 추가

*아래 관련 글 참고

*API 관련 설명 생략

*자세한 설명 생략

 

 

▷ v-calendar 설치

*vue-cli를 통해 Project 생성 후 진행

 

💡npm install v-calendar@next @popperjs/core

 

 

▷ 기초 예제 - 날짜 검색 조건 추가

*프로젝트 전체 구조 관련 글 참고

 

- main.js

*VCalendar 라이브러리 등록

/** Vue */
import { createApp } from 'vue'
import App from './App.vue'

/** Router */
import { router } from '@/module/router/MenuNav.js'
import { createPinia } from 'pinia'

/**Prime : 테이블 라이브러리 */
import PrimeVue from 'primevue/config';
import 'primevue/resources/themes/lara-light-teal/theme.css'

/** ECharts : 챠트 라이브러리 */
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { use } from 'echarts/core'
use([ CanvasRenderer, PieChart, TooltipComponent, LegendComponent ])

/** Vcalendar : 달력 라이브러리 */
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

/** Vue Appicaiotn Setting */
createApp(App)
    /** 모듈 사용 등록 */
    .use(router)
    .use(createPinia())
    
    /** 라이브러리 사용 등록 */
    .use(PrimeVue)
    .use(VCalendar, {})
    
    
    /** 연결 */
    .mount('#app')

 

- CmmUtil.js

*Date 관련 Util 추가

*API 요청 형식에 맞게 수정하는 부분

/**
 * Date Formater
 * 
 * @param {*} date 
 * @returns YYYYMMdd
 */
function getFormatDate(date) {
    const YYYY = String(date.getFullYear())
    const MM = String((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0" + (date.getMonth() + 1))
    const dd = String(date.getDate() >= 10 ? date.getDate() : "0" + date.getDate())
    return YYYY + MM + dd
}

export {
    getFormatDate,
}

 

- A01C01.vue

*전체 코드( inputDate )

<template>
    <div>
        <h1>🌼 꽃한송이</h1><br />
    </div>
    <div>
        <h3>연령대 비중</h3>
        <div>
            <h6 style="color: red;">*원하는 기간을 선택하여 검색해주세요</h6>
            <VDatePicker v-model.range="inputDate" mode="date" style="width: 50%;" /><br /><br />
            <button @click="getAgeRatio()" style="width: 50%; font-size: medium;">🔍조회</button>
        </div><br /><br />
        <div v-if="state">
            <h5> [ 조회 결과 ]</h5>
            <h6 style="color: red;">*연령대 박스를 선택하여 필터링할 수 있습니다.</h6>
            <v-chart class="chart" :option="option" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useLoginStore } from '@/module/store/LoginStore.js'
import { API_LIST, sendPost } from '@/module/AxiosModule.js'
import * as cmmUtil from "@/module/CmmUtil.js";

import VChart from 'vue-echarts'


onMounted(() => {
    /** 로그인 체크 */
    useLoginStore().checkUser()
})

const state = ref(false)
const ageList = [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ];

const inputDate = ref({
    start: new Date(),
    end: new Date()
});

/** Pie Chart 생성 */
const option = ref({
    legend: {
        top: "top",
    },
    tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
        {
            name: "AgeRatio",
            type: "pie",
            radius: [40, 150],
            roseType: "area",
            itemStyle: {
                borderRadius: 8
            },
            data: []
        },
    ],
});

/** Pie Chart 초기화 */
async function getAgeRatio() {
    /* 요청 값 설정 */
    const REQ_DATA = {
        "areaCd": [
            "AREA-00" // 공간코드 고정
        ],
        "ages": ageList,
        "startDate": cmmUtil.getFormatDate(inputDate.value.start),
        "endDate": cmmUtil.getFormatDate(inputDate.value.end)
    }

    /* 방문객 스캔 특정 기간 통계 조회 요청 */
    const resVO = await sendPost(API_LIST["BHS-SSC-1001"], REQ_DATA)
    /* Pie Chart Data */
    if (resVO.resultCode == "0000") {
        const resultList = []
        for (const ages of ageList) {
            const result = { name: ages, value: 0 } // Data 형식
            for (const data of resVO.result) {
                if (ages == data.visitorAges) {
                    result.value += data.visitorAgesCnt
                }
            }
            resultList.push(result)
        }
        option.value.series[0].data = resultList
        state.value = true
    } else {
        state.value = false
    }
}
</script>

 

 

▷ 결과 확인

 

① 초기 화면

 

② 원하는 기간 선택 후 조회 클릭 시 조회결과 노출

 

③ 조회결과가 없는 경우 팝업 확인 시 조회결과 숨김

 

 

▷ 참고

Welcome | VCalendar

 

 

▷ 관련 글

Vue3 기초 예제 - Pie Charts(Vue-ECharts)

Vue3 기초 예제 프로젝트 정리