329 lines
9.3 KiB
Vue
329 lines
9.3 KiB
Vue
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
<template>
|
|
<div class="pb-8 px-4 sm:px-6 lg:px-8">
|
|
<div class="sm:flex sm:items-center">
|
|
<div class="sm:flex-auto">
|
|
<h1 class="text-xl font-semibold text-gray-900">
|
|
API 사용 통계 {{ hero == 'usage' ? '(사용량)' : '(단어)' }}
|
|
</h1>
|
|
<p class="mt-2 text-sm text-gray-700">
|
|
사용량 통계를 보여 줍니다. 구분 항목으로 시간별, 날짜별,
|
|
월별 구분이 가능합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<select
|
|
id="targetUnit"
|
|
v-model="targetUnit"
|
|
name="targetUnit"
|
|
class="mt-0 block pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
|
|
@change="onChange($event)"
|
|
>
|
|
<option
|
|
v-for="unit in units"
|
|
:key="unit.key"
|
|
:selected="unit.current"
|
|
:value="unit.key"
|
|
>
|
|
<span class="truncate">
|
|
{{ unit.key }}
|
|
</span>
|
|
</option>
|
|
</select>
|
|
|
|
<Datepicker
|
|
v-model="date"
|
|
class="w-64 mt-4 sm:mt-0 sm:ml-2 sm:flex-none"
|
|
range
|
|
multi-calendars
|
|
multi-calendars-solo
|
|
:format="inputFormat"
|
|
:preview-format="previewFormat"
|
|
@update:modelValue="handleDate"
|
|
/>
|
|
</div>
|
|
|
|
<StatisticsTable1
|
|
:headings="listHeadings"
|
|
:actions="listActions"
|
|
:keys="listKeys"
|
|
:data="listData"
|
|
:action-key="actionKey"
|
|
:column-filter="columnFilter"
|
|
:do-action="doAction"
|
|
/>
|
|
|
|
<div class="p-0 rounded-bl-2xl rounded-br-2xl md:px-0">
|
|
<button
|
|
type="button"
|
|
class="relative inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none"
|
|
@click="doDownload()"
|
|
>
|
|
<span> 엑셀파일로 다운로드 </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Datepicker from '@vuepic/vue-datepicker';
|
|
import '@vuepic/vue-datepicker/dist/main.css';
|
|
|
|
definePageMeta({
|
|
middleware: 'check-auth-admin',
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
const route = useRoute();
|
|
const hero = ref(route.params.hero);
|
|
|
|
const targetUID = ref(route.query.uid ? route.query.uid : 'all');
|
|
const targetKey = ref(route.query.key ? route.query.key : 'all');
|
|
const targetUnit = ref(route.query.unit ? route.query.unit : 'day');
|
|
|
|
const { $dayjs } = useNuxtApp();
|
|
|
|
const targetDate = ref($dayjs(new Date().toISOString()).format('YYYY'));
|
|
const targetDateMonth = ref($dayjs(new Date().toISOString()).format('YYYY'));
|
|
const targetDateDay = ref({
|
|
month: new Date().getMonth(),
|
|
year: new Date().getFullYear,
|
|
});
|
|
const targetDateHour = ref($dayjs(new Date().toISOString()));
|
|
|
|
const units = ref([
|
|
{ current: targetUnit.value == 'year', key: 'year' },
|
|
{ current: targetUnit.value == 'month', key: 'month' },
|
|
{ current: targetUnit.value == 'day', key: 'day' },
|
|
{ current: targetUnit.value == 'hour', key: 'hour' },
|
|
]);
|
|
|
|
function onChange(e) {
|
|
console.log('targetUnit.value=', targetUnit.value);
|
|
|
|
navigateTo(
|
|
'/admin/statistics/byterm/' +
|
|
hero.value +
|
|
'?unit=' +
|
|
targetUnit.value +
|
|
'&uid=' +
|
|
targetUID.value +
|
|
'&key=' +
|
|
targetKey.value
|
|
);
|
|
refresh();
|
|
|
|
units.value = [
|
|
{ current: targetUnit.value == 'year', key: 'year' },
|
|
{ current: targetUnit.value == 'month', key: 'month' },
|
|
{ current: targetUnit.value == 'day', key: 'day' },
|
|
{ current: targetUnit.value == 'hour', key: 'hour' },
|
|
];
|
|
|
|
refresh();
|
|
}
|
|
|
|
const date = ref([]);
|
|
|
|
const inputFormat = (date) => {
|
|
// console.log('huk date=', date);
|
|
if (date.length == 1) {
|
|
const day = date[0].getDate();
|
|
const month = date[0].getMonth() + 1;
|
|
const year = date[0].getFullYear();
|
|
|
|
return `${day}/${month}/${year}`;
|
|
} else if (date.length == 2) {
|
|
const day1 = date[0].getDate();
|
|
const month1 = date[0].getMonth() + 1;
|
|
const year1 = date[0].getFullYear();
|
|
const day2 = date[1].getDate();
|
|
const month2 = date[1].getMonth() + 1;
|
|
const year2 = date[1].getFullYear();
|
|
|
|
return `${year1}-${month1}-${day1} ~ ${year2}-${month2}-${day2}`;
|
|
}
|
|
};
|
|
|
|
const previewFormat = (date) => {
|
|
// console.log('huk date=', date);
|
|
if (date.length == 1) {
|
|
const day = date[0].getDate();
|
|
const month = date[0].getMonth() + 1;
|
|
const year = date[0].getFullYear();
|
|
|
|
return `${day}/${month}/${year}`;
|
|
} else if (date.length == 2) {
|
|
const day1 = date[0].getDate();
|
|
const month1 = date[0].getMonth() + 1;
|
|
const year1 = date[0].getFullYear();
|
|
const day2 = date[1].getDate();
|
|
const month2 = date[1].getMonth() + 1;
|
|
const year2 = date[1].getFullYear();
|
|
|
|
return `${year1}-${month1}-${day1} ~ ${year2}-${month2}-${day2}`;
|
|
}
|
|
};
|
|
|
|
const endDate = new Date();
|
|
const startDate = new Date(new Date().setDate(endDate.getDate() - 7));
|
|
|
|
date.value = [startDate, endDate];
|
|
|
|
const startDateTag = ref($dayjs(startDate.toISOString()).format('YYYYMMDDHH'));
|
|
const endDateTag = ref($dayjs(endDate.toISOString()).format('YYYYMMDDHH'));
|
|
|
|
function doDownload() {
|
|
const anchor = document.createElement('a');
|
|
|
|
let urlBase = '';
|
|
|
|
const currentHost = window.location.host.toLowerCase();
|
|
const currentProtocol = window.location.protocol;
|
|
const currentDomain = _utils.getDomain(window.location.href);
|
|
|
|
const apiBaseUrl = _crossCtl.config['API_BASE_URL'];
|
|
|
|
console.log('currentHost=', currentHost);
|
|
console.log('currentProtocol=', currentProtocol);
|
|
console.log('currentDomain=', currentDomain);
|
|
|
|
console.log('apiBaseUrl=', apiBaseUrl);
|
|
|
|
if (apiBaseUrl.indexOf(currentHost) == -1) {
|
|
urlBase = apiBaseUrl;
|
|
} else {
|
|
urlBase = '/api/';
|
|
}
|
|
|
|
console.log('urlBase=', urlBase);
|
|
|
|
anchor.href =
|
|
urlBase +
|
|
'local/download/report_' +
|
|
hero.value +
|
|
'_' +
|
|
startDateTag.value +
|
|
'_' +
|
|
endDateTag.value +
|
|
'.xlsx?tag=' +
|
|
hero.value +
|
|
'&startDateTag=' +
|
|
startDateTag.value +
|
|
'&endDateTag=' +
|
|
endDateTag.value +
|
|
'&unit=' +
|
|
targetUnit.value +
|
|
'&uid=' +
|
|
targetUID.value +
|
|
'&key=' +
|
|
targetKey.value;
|
|
|
|
anchor.target = '_blank';
|
|
|
|
anchor.click();
|
|
}
|
|
|
|
const listHeadings =
|
|
hero.value == 'usage'
|
|
? [
|
|
{
|
|
title: 'date',
|
|
key: 'date_tag',
|
|
},
|
|
{
|
|
title: 'total',
|
|
key: 'total',
|
|
},
|
|
{
|
|
title: 'hit',
|
|
key: 'hit',
|
|
},
|
|
{
|
|
title: 'size',
|
|
key: 'size',
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
title: 'word',
|
|
key: 'word',
|
|
widthRatio: '100',
|
|
},
|
|
{
|
|
title: 'count',
|
|
key: 'count_sum',
|
|
},
|
|
];
|
|
const listActions = [];
|
|
const actionKey = 'serial';
|
|
const listKeys = [
|
|
'serial',
|
|
'date_tag',
|
|
'total',
|
|
'hit',
|
|
'size',
|
|
'uniq_ip',
|
|
'uniq_referrer',
|
|
'updated',
|
|
];
|
|
const listData = ref([]);
|
|
|
|
function columnFilter(key, val) {
|
|
// console.log('columnFilter(), key = ', key, ', val = ', val);
|
|
|
|
return val;
|
|
}
|
|
|
|
function doAction(tag, target) {
|
|
console.log('on doAction(), tag=', tag, ', target=', target);
|
|
router.push({
|
|
name: 'key-edit',
|
|
params: { target: target },
|
|
});
|
|
}
|
|
|
|
async function refresh() {
|
|
const responseJson = await _crossCtl.doComm(
|
|
'local/select',
|
|
hero.value == 'usage'
|
|
? 'admin:statistics:usage'
|
|
: 'admin:statistics:word',
|
|
{
|
|
unit: targetUnit.value,
|
|
uid: targetUID.value,
|
|
key: targetKey.value,
|
|
startDateTag: startDateTag.value,
|
|
endDateTag: endDateTag.value,
|
|
}
|
|
);
|
|
|
|
for (let i = 0; i < responseJson['data'].length; i++) {
|
|
responseJson['data'][i]['hit_ratio'] =
|
|
(
|
|
(responseJson['data'][i]['hit'] /
|
|
responseJson['data'][i]['total']) *
|
|
100
|
|
).toFixed(2) + '%';
|
|
responseJson['data'][i]['size_avg'] = _utils.formatBytes(
|
|
responseJson['data'][i]['size'] / responseJson['data'][i]['total'],
|
|
2
|
|
);
|
|
}
|
|
|
|
listData.value = responseJson['data'];
|
|
|
|
console.log('listData.value=', listData.value);
|
|
}
|
|
|
|
function handleDate(date) {
|
|
console.log('huk date = ', date);
|
|
startDateTag.value = $dayjs(date[0].toISOString()).format('YYYYMMDDHH');
|
|
endDateTag.value = $dayjs(date[1].toISOString()).format('YYYYMMDDHH');
|
|
refresh();
|
|
}
|
|
|
|
refresh();
|
|
</script>
|