first
This commit is contained in:
194
safekiso_admin/pages/admin/statistics/index.vue
Normal file
194
safekiso_admin/pages/admin/statistics/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user