first
This commit is contained in:
328
inspond-nuxt-safekiso/pages/admin/statistics/byterm/[hero].vue
Normal file
328
inspond-nuxt-safekiso/pages/admin/statistics/byterm/[hero].vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user