first

inspond-nuxt-safekiso/pages/admin/dashboard/index.vue

@@ -0,0 +1,103 @@
+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+    <div>
+        <div class="bg-gray-50 pt-12 sm:pt-16">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="max-w-4xl mx-auto text-center">
+                    <h2
+                        class="text-3xl font-extrabold text-gray-900 sm:text-4xl"
+                    >
+                        어드민 대시보드
+                    </h2>
+                    <p class="mt-3 text-xl text-gray-500 sm:mt-4">
+                        서비스 현황 개괄이 표시될 페이지 입니다.
+                    </p>
+                </div>
+            </div>
+            <div class="mt-10 pb-12 bg-white sm:pb-16">
+                <div class="relative">
+                    <div class="absolute inset-0 h-1/2 bg-gray-50" />
+                    <div
+                        class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+                    >
+                        <div class="max-w-4xl mx-auto">
+                            <dl
+                                class="rounded-lg bg-white shadow-lg sm:grid sm:grid-cols-3"
+                            >
+                                <div
+                                    class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r"
+                                >
+                                    <dt
+                                        class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"
+                                    >
+                                        word watched
+                                    </dt>
+                                    <dd
+                                        class="order-1 text-5xl font-extrabold text-indigo-600"
+                                    >
+                                        {{ formattedCount }}
+                                    </dd>
+                                </div>
+                                <div
+                                    class="flex flex-col border-t border-b border-gray-100 p-6 text-center sm:border-0 sm:border-l sm:border-r"
+                                >
+                                    <dt
+                                        class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"
+                                    >
+                                        hit count
+                                    </dt>
+                                    <dd
+                                        class="order-1 text-5xl font-extrabold text-indigo-600"
+                                    >
+                                        {{ formattedHitCount }}
+                                    </dd>
+                                </div>
+                                <div
+                                    class="flex flex-col border-t border-gray-100 p-6 text-center sm:border-0 sm:border-l"
+                                >
+                                    <dt
+                                        class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"
+                                    >
+                                        avg response time
+                                    </dt>
+                                    <dd
+                                        class="order-1 text-5xl font-extrabold text-indigo-600"
+                                    >
+                                        {{ elapsedAvg.toFixed(2) }}ms
+                                    </dd>
+                                </div>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+    middleware: 'check-auth-admin',
+});
+
+const wordCount = ref(0);
+const hitCount = ref(0);
+const elapsedAvg = ref(0);
+
+const formattedCount = computed(() => {
+    return _utils.formatNumberWithComma(wordCount.value);
+});
+
+const formattedHitCount = computed(() => {
+    return _utils.formatNumberWithComma(hitCount.value);
+});
+
+const responseJson = await _crossCtl.doComm('local/select', 'dashboard', {});
+
+console.log('responseJson=', responseJson);
+if (responseJson['responseMessage'] == 'ok') {
+    wordCount.value = responseJson['data']['wordCount'];
+    hitCount.value = responseJson['data']['hitCount'];
+    elapsedAvg.value = responseJson['data']['elapsedAvg'] * 1000;
+}
+</script>