tab, component, popup 변경
This commit is contained in:
173
pages/[tabId]/admin/codes.vue
Normal file
173
pages/[tabId]/admin/codes.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="codes-page">
|
||||
<div class="page-header">
|
||||
<h1>공통코드</h1>
|
||||
<div class="page-actions">
|
||||
<button class="action-btn">코드 추가</button>
|
||||
<button class="action-btn">그룹코드 추가</button>
|
||||
<button class="action-btn primary">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aggrid-section">
|
||||
<div class="aggrid-title">그룹코드</div>
|
||||
<div class="aggrid-container">
|
||||
<ag-grid-vue
|
||||
class="ag-theme-material"
|
||||
style="width: 100%; height: 180px"
|
||||
:column-defs="groupColDefs"
|
||||
:row-data="groupRowData"
|
||||
:default-col-def="defaultColDef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aggrid-section">
|
||||
<div class="aggrid-title">코드</div>
|
||||
<div class="aggrid-container">
|
||||
<ag-grid-vue
|
||||
class="ag-theme-material"
|
||||
style="width: 100%; height: 320px"
|
||||
:column-defs="codeColDefs"
|
||||
:row-data="codeRowData"
|
||||
:default-col-def="defaultColDef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { AgGridVue } from "ag-grid-vue3";
|
||||
import { ModuleRegistry, AllCommunityModule } from "ag-grid-community";
|
||||
import type { GroupCode, Code, ColDef, DefaultColDef } from "~/types/ag-grid";
|
||||
|
||||
// AG Grid 모듈 등록
|
||||
onMounted(() => {
|
||||
ModuleRegistry.registerModules([AllCommunityModule]);
|
||||
});
|
||||
|
||||
const groupColDefs = ref<ColDef[]>([
|
||||
{ headerName: "그룹 코드", field: "groupCode", width: 140 },
|
||||
{ headerName: "그룹 코드명", field: "groupName", width: 180 },
|
||||
{ headerName: "사용 여부", field: "useYn", width: 100 },
|
||||
{ headerName: "정렬 순서", field: "order", width: 100 },
|
||||
]);
|
||||
|
||||
const groupRowData = ref<GroupCode[]>([
|
||||
{
|
||||
groupCode: "MONITORING_001",
|
||||
groupName: "모니터링 기본정보",
|
||||
useYn: "Y",
|
||||
order: 1,
|
||||
},
|
||||
{ groupCode: "RESOURCE_001", groupName: "리소스 유형", useYn: "Y", order: 6 },
|
||||
]);
|
||||
|
||||
const codeColDefs = ref<ColDef[]>([
|
||||
{ headerName: "코드", field: "code", width: 160 },
|
||||
{ headerName: "코드명", field: "codeName", width: 120 },
|
||||
{ headerName: "코드 상세", field: "codeDetail", width: 200 },
|
||||
{ headerName: "부모 코드", field: "parentCode", width: 120 },
|
||||
{ headerName: "사용 여부", field: "useYn", width: 100 },
|
||||
{ headerName: "정렬 순서", field: "order", width: 100 },
|
||||
]);
|
||||
|
||||
const codeRowData = ref<Code[]>([
|
||||
{
|
||||
code: "RESOURCE_001_001",
|
||||
codeName: "facility",
|
||||
codeDetail: "주요 시설을 나타냄",
|
||||
parentCode: "",
|
||||
useYn: "Y",
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
code: "RESOURCE_001_002",
|
||||
codeName: "equipment",
|
||||
codeDetail: "사업에 설치된 장비",
|
||||
parentCode: "",
|
||||
useYn: "Y",
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
code: "RESOURCE_001_003",
|
||||
codeName: "device",
|
||||
codeDetail: "IoT 디바이스 또는 센서",
|
||||
parentCode: "",
|
||||
useYn: "Y",
|
||||
order: 3,
|
||||
},
|
||||
{
|
||||
code: "RESOURCE_001_004",
|
||||
codeName: "station",
|
||||
codeDetail: "데이터 수집 또는 처리 스테이션",
|
||||
parentCode: "",
|
||||
useYn: "Y",
|
||||
order: 4,
|
||||
},
|
||||
]);
|
||||
|
||||
const defaultColDef = ref<DefaultColDef>({
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
filter: true,
|
||||
minWidth: 80,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.codes-page {
|
||||
padding: 32px 32px 0 32px;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.page-header h1 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
}
|
||||
.page-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.action-btn {
|
||||
background: #f4f6fa;
|
||||
border: 1px solid #e0e7ef;
|
||||
color: #1976d2;
|
||||
font-weight: 500;
|
||||
border-radius: 5px;
|
||||
padding: 7px 18px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.action-btn.primary {
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: #e6f0fa;
|
||||
}
|
||||
.aggrid-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.aggrid-title {
|
||||
font-size: 1.08rem;
|
||||
font-weight: 600;
|
||||
color: #1976d2;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.aggrid-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
|
||||
padding: 18px 18px 0 18px;
|
||||
}
|
||||
</style>
|
||||
118
pages/[tabId]/admin/logs.vue
Normal file
118
pages/[tabId]/admin/logs.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<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>
|
||||
148
pages/[tabId]/admin/programs.vue
Normal file
148
pages/[tabId]/admin/programs.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="codes-page">
|
||||
<div class="page-header">
|
||||
<h1>프로그램 관리</h1>
|
||||
<div class="page-actions">
|
||||
<button class="action-btn">프로그램 추가</button>
|
||||
<button class="action-btn primary">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aggrid-section">
|
||||
<div class="aggrid-title">프로그램 목록</div>
|
||||
<div class="aggrid-container">
|
||||
<ag-grid-vue
|
||||
class="ag-theme-material"
|
||||
style="width: 100%; height: 600px"
|
||||
:column-defs="programColDefs"
|
||||
:row-data="programRowData"
|
||||
:default-col-def="defaultColDef"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { AgGridVue } from "ag-grid-vue3";
|
||||
import { ModuleRegistry, AllCommunityModule } from "ag-grid-community";
|
||||
import type { Program, ColDef, DefaultColDef } from "~/types/ag-grid";
|
||||
|
||||
onMounted(() => {
|
||||
ModuleRegistry.registerModules([AllCommunityModule]);
|
||||
});
|
||||
|
||||
const programColDefs = ref<ColDef[]>([
|
||||
{ headerName: "부모 코드", field: "parentCode", width: 100 },
|
||||
{ headerName: "레벨", field: "level", width: 60 },
|
||||
{ headerName: "코드", field: "code", width: 120 },
|
||||
{ headerName: "이름", field: "name", width: 160 },
|
||||
{ headerName: "사용 여부", field: "useYn", width: 80 },
|
||||
{ headerName: "메뉴 여부", field: "menuYn", width: 80 },
|
||||
{ headerName: "API 여부", field: "apiYn", width: 80 },
|
||||
{ headerName: "예외 허용 여부", field: "exceptionYn", width: 110 },
|
||||
{ headerName: "표시 순서", field: "order", width: 80 },
|
||||
{ headerName: "uri", field: "uri", width: 180 },
|
||||
{ headerName: "필드1", field: "field1", width: 100 },
|
||||
{ headerName: "필드2", field: "field2", width: 100 },
|
||||
{ headerName: "필드3", field: "field3", width: 100 },
|
||||
]);
|
||||
|
||||
const programRowData = ref<Program[]>([
|
||||
{
|
||||
parentCode: "OMS01",
|
||||
level: 1,
|
||||
code: "OMS01_01",
|
||||
name: "DASHBOARD",
|
||||
useYn: true,
|
||||
menuYn: true,
|
||||
apiYn: false,
|
||||
exceptionYn: false,
|
||||
order: 1,
|
||||
uri: "/dashboard/overview",
|
||||
field1: "ri-pie-chart-2-line",
|
||||
field2: "",
|
||||
field3: "",
|
||||
},
|
||||
{
|
||||
parentCode: "OMS01_02",
|
||||
level: 2,
|
||||
code: "OMS01_02_01",
|
||||
name: "IoT 센서이력 조회",
|
||||
useYn: true,
|
||||
menuYn: true,
|
||||
apiYn: false,
|
||||
exceptionYn: false,
|
||||
order: 5,
|
||||
uri: "/environmental/iot-sensor-history",
|
||||
field1: "ri-line-chart-line",
|
||||
field2: "",
|
||||
field3: "",
|
||||
},
|
||||
// ... (샘플 데이터 추가)
|
||||
]);
|
||||
|
||||
const defaultColDef = ref<DefaultColDef>({
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
filter: true,
|
||||
minWidth: 80,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.codes-page {
|
||||
padding: 32px 32px 0 32px;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.page-header h1 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
}
|
||||
.page-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.action-btn {
|
||||
background: #f4f6fa;
|
||||
border: 1px solid #e0e7ef;
|
||||
color: #1976d2;
|
||||
font-weight: 500;
|
||||
border-radius: 5px;
|
||||
padding: 7px 18px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.action-btn.primary {
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: #e6f0fa;
|
||||
}
|
||||
.aggrid-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.aggrid-title {
|
||||
font-size: 1.08rem;
|
||||
font-weight: 600;
|
||||
color: #1976d2;
|
||||
margin-bottom: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.aggrid-container {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
|
||||
padding: 18px 18px 0 18px;
|
||||
}
|
||||
</style>
|
||||
41
pages/[tabId]/admin/resource.vue
Normal file
41
pages/[tabId]/admin/resource.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<ContentsWrapper>
|
||||
<template #actions>
|
||||
<button @click="onAddClick">추가</button>
|
||||
<button @click="onUpdateClick">저장</button>
|
||||
</template>
|
||||
<input type="text" >
|
||||
<ToastGrid
|
||||
ref="grid1Ref"
|
||||
:data="data"
|
||||
:columns="colDefs"
|
||||
/>
|
||||
</ContentsWrapper>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {colDefs} from '../../../composables/grids/resourceGrid'
|
||||
|
||||
definePageMeta({
|
||||
title: '리소스 관리'
|
||||
})
|
||||
|
||||
const data = [{}]
|
||||
|
||||
const grid1Ref = ref();
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick() // DOM 및 컴포넌트 렌더링 완료 대기
|
||||
grid1Ref.value?.api()?.setBodyHeight('700')
|
||||
})
|
||||
|
||||
function onAddClick() {
|
||||
grid1Ref.value?.api()?.appendRow({});
|
||||
}
|
||||
|
||||
function onUpdateClick() {
|
||||
//grid1Ref.value?.clearGrid();
|
||||
console.log(grid1Ref.value?.api()?.getModifiedRows());
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user