119 lines
2.7 KiB
Vue
119 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="logs-page">
|
||
|
|
<div class="page-header">
|
||
|
|
<div class="breadcrumb">관리자 메뉴 / 접속기록</div>
|
||
|
|
</div>
|
||
|
|
<div class="filter-section">
|
||
|
|
<label for="date-input">날짜 설정</label>
|
||
|
|
<input id="date-input" v-model="selectedDate" type="date" />
|
||
|
|
</div>
|
||
|
|
<div class="aggrid-section">
|
||
|
|
<div class="aggrid-container">
|
||
|
|
<ag-grid-vue
|
||
|
|
class="ag-theme-material"
|
||
|
|
style="width: 100%; height: 220px"
|
||
|
|
:column-defs="colDefs"
|
||
|
|
:row-data="filteredRows"
|
||
|
|
:default-col-def="defaultColDef"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="copyright">
|
||
|
|
© 2024. Ocean Monitoring System. All Rights Reserved.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed, onMounted } from "vue";
|
||
|
|
import { AgGridVue } from "ag-grid-vue3";
|
||
|
|
import { ModuleRegistry, AllCommunityModule } from "ag-grid-community";
|
||
|
|
import type { LogEntry, ColDef, DefaultColDef } from "~/types/ag-grid";
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
ModuleRegistry.registerModules([AllCommunityModule]);
|
||
|
|
});
|
||
|
|
|
||
|
|
const selectedDate = ref<string>("2025-06-27");
|
||
|
|
const rows = ref<LogEntry[]>([
|
||
|
|
{ account: "admin3", datetime: "Jun 27, 2025, 9:51:04 AM", ip: "172.17.0.1" },
|
||
|
|
{ account: "admin9", datetime: "Jun 27, 2025, 8:51:41 AM", ip: "172.17.0.1" },
|
||
|
|
]);
|
||
|
|
|
||
|
|
const colDefs = ref<ColDef[]>([
|
||
|
|
{ headerName: "계정", field: "account", width: 160 },
|
||
|
|
{ headerName: "접속 일시", field: "datetime", width: 200 },
|
||
|
|
{ headerName: "IP", field: "ip", width: 160 },
|
||
|
|
]);
|
||
|
|
|
||
|
|
const defaultColDef = ref<DefaultColDef>({
|
||
|
|
resizable: true,
|
||
|
|
sortable: true,
|
||
|
|
filter: true,
|
||
|
|
minWidth: 80,
|
||
|
|
});
|
||
|
|
|
||
|
|
const filteredRows = computed<LogEntry[]>(() => {
|
||
|
|
// 실제 구현시 날짜 필터링 적용
|
||
|
|
return rows.value;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.logs-page {
|
||
|
|
padding: 32px 32px 0 32px;
|
||
|
|
}
|
||
|
|
.page-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
}
|
||
|
|
.breadcrumb {
|
||
|
|
font-size: 1.08rem;
|
||
|
|
color: #1976d2;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.filter-section {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
margin-bottom: 18px;
|
||
|
|
margin-left: 2px;
|
||
|
|
}
|
||
|
|
.filter-section label {
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #222;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.filter-section input[type="date"] {
|
||
|
|
border: 1px solid #e0e7ef;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 6px 12px;
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #222;
|
||
|
|
background: #f4f6fa;
|
||
|
|
}
|
||
|
|
.aggrid-section {
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
.aggrid-container {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
|
||
|
|
padding: 18px 18px 0 18px;
|
||
|
|
}
|
||
|
|
.table-info {
|
||
|
|
font-size: 0.98rem;
|
||
|
|
color: #666;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
.copyright {
|
||
|
|
text-align: right;
|
||
|
|
color: #888;
|
||
|
|
font-size: 0.98rem;
|
||
|
|
margin: 32px 8px 0 0;
|
||
|
|
padding-bottom: 18px;
|
||
|
|
}
|
||
|
|
</style>
|