SAFEKISO/inspond-nuxt-safekiso/pages/admin/statistics/index.vue

<template>
    <div class="m-8">
        <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
            <div>
                <div class="sm:flex sm:items-center">
                    <div class="sm:flex-auto">
                        <h1 class="text-xl font-semibold text-gray-900">
                            전체 사용량 통계
                        </h1>
                        <p class="mt-2 text-sm text-gray-700">
                            전체 서버의 사용량 통계를 확인 합니다.
                        </p>
                    </div>
                    <img
                        v-if="inPregressFlag"
                        width="32"
                        src="/loading-load-2.gif"
                    />
                    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
                        <button
                            type="button"
                            class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                            @click="
                                navigateTo('/admin/statistics/byterm/usage')
                            "
                        >
                            상세 사용량 통계
                        </button>
                        <button
                            type="button"
                            class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                            @click="navigateTo('/admin/statistics/byterm/word')"
                        >
                            상세 단어 통계
                        </button>
                    </div>
                </div>

                <section aria-labelledby="applicant-information-title">
                    <div class="bg-white mt-3 shadow sm:rounded-lg">
                        <div class="px-4 py-5 sm:px-6">
                            <h2
                                id="applicant-information-title"
                                class="text-lg font-medium leading-6 text-gray-900"
                            >
                                최근 24시간 사용량
                            </h2>
                        </div>
                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                            <LineChart
                                :chart-data="lineChartData"
                                :chart-options="lineChartOptions"
                            />
                        </div>
                        <!--
                        <div>
                            <a
                                href="javascript:void(0)"
                                class="block bg-gray-50 px-4 py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700 sm:rounded-b-lg"
                                @click="refresh()"
                                >새로 고침</a
                            >
                        </div>
                        -->
                    </div>
                </section>

                <section aria-labelledby="applicant-information-title">
                    <div class="bg-white mt-3 shadow sm:rounded-lg">
                        <div class="px-4 py-5 sm:px-6">
                            <h2
                                id="applicant-information-title"
                                class="text-lg font-medium leading-6 text-gray-900"
                            >
                                최근 24시간 키별 점유율
                            </h2>
                        </div>
                        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
                            <PieChart
                                :chart-data="pieChartData"
                                :chart-options="pieChartOptions"
                            />
                        </div>
                        <!--
                        <div>
                            <a
                                href="javascript:void(0)"
                                class="block bg-gray-50 px-4 py-4 text-center text-sm font-medium text-gray-500 hover:text-gray-700 sm:rounded-b-lg"
                                @click="refresh()"
                                >새로 고침</a
                            >
                        </div>
                        -->
                    </div>
                </section>
            </div>
        </div>

        <div class="pt-5">
            <div class="flex justify-end"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
definePageMeta({
    middleware: 'check-auth-op',
});
const inPregressFlag = ref(true);

const responseJson = await _crossCtl.doComm(
    'local/select',
    'admin:dashboard',
    {}
);

let rawData1 = [];
let rawData2 = [];

console.log('responseJson=', responseJson);
inPregressFlag.value = false;

if (responseJson['responseMessage'] == 'ok') {
    rawData1 = responseJson['result']['adminDashData1'];
    rawData2 = responseJson['result']['adminDashData2'];
} else {
    alert(responseJson['responseMessage']);
}

const lineChartData = {
    labels: rawData1.map((item) => item['date_tag']),
    datasets: [
        {
            label: 'Total',
            backgroundColor: '#00D8FF',
            data: rawData1.map((item) => item['total']),
        },
        {
            label: 'Hit',
            backgroundColor: '#f87979',
            data: rawData1.map((item) => item['hit']),
        },
    ],
};

const lineChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
};

const pieChartData = {
    labels: rawData2.map((item) => item['key_name']),
    datasets: [
        {
            // backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
            data: rawData2.map((item) => item['total']),
        },
    ],
};

const pieChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
};

const chartData = {
    labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',
    ],
    datasets: [
        {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
        },
    ],
};

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
};
</script>