104 lines
4.4 KiB
Vue
104 lines
4.4 KiB
Vue
<!-- 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>
|