File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="w_100 h_100">
<div class="zone1 mb40">
<div class="zone-wrap">
<div>
<img src="../../../resources/img/content/ico_asset.svg" alt="">
<span>새로운 디지털 자산 생성</span>
</div>
<span><button class="btn-ico sm ico-plus"></button></span>
</div>
</div>
<div class="zone2-wrap" style="height: calc(100% - 115px);">
<div class="zone2 mb40">
<div class="sec-title mb10">
<p>최신 디지털 자산</p>
</div>
<ul class="layout center gap30">
<li v-for="item in assets" :key="item.id" class="box-item">
<div class="layout center space-between mb10">
<div class="box-title" >{{ item.name }}</div>
<div class="date" >{{ item.date }}</div>
</div>
<img :src="item.img" alt="자산 이미지" >
</li>
</ul>
</div>
<div class="zone3 layout stetch gap30" style="height: calc(100% - 353px)">
<div style="width: 50%;">
<div class="sec-title mb10">
<p>피드백 알림</p>
</div>
<ul class="box-item">
<li class="alram-item" v-for="item in alarms" :key="item.id">
<div class="layout center gap10">
<img src="../../../resources/img/content/ico_alram.svg" alt="">
<p><span>프로젝트{{ item.project }}</span>에 피드백 <span>{{ item.count }}건</span>이 입력되었습니다.</p>
</div>
</li>
</ul>
</div>
<div style="width: 50%;">
<div class="sec-title mb10">
<p>최근 활동 로그</p>
</div>
<ul class="box-item">
<li class="alram-item" v-for="log in activityLogs" :key="log.id">
<div class="layout center gap10">
<img src="../../../resources/img/content/ico_alram.svg" alt="">
<p> {{ log.time }}에 {{ log.project }}가 마지막 수정됨.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko'; // 한국어 locale 불러오기
import { findAllLogsProc } from '../../../resources/api/main';
export default {
data() {
return {
assets: [
{ id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
{ id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
{ id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
],
alarms: [
{ id: 1, project: 'A', count: 2 },
{ id: 2, project: 'B', count: 1 },
{ id: 3, project: 'C', count: 5 },
{ id: 4, project: 'D', count: 3 },
{ id: 5, project: 'F', count: 7 }
],
activityLogs: [
// { id: 1, project: '프로젝트A', time: '어제 14:30' },
// { id: 2, project: '프로젝트B', time: '어제 18:10' },
// { id: 3, project: '프로젝트C', time: '오늘 09:05' },
// { id: 4, project: '프로젝트D', time: '오늘 09:05' },
// { id: 5, project: '프로젝트F', time: '오늘 09:05' }
]
};
},
methods: {
loadLogs() {
findAllLogsProc({
memberId: this.getMemId
})
.then(response => {
// 프로젝트 수정 로그
const editLogList = response.data.result.editLogs;
this.activityLogs = editLogList.map(log => ({
id: log.projectLogId,
projectGroupId: log.projectGroupId,
project: log.projectName,
time: dayjs(log.createdAt).fromNow()
}))
// 프로젝트 생성 로그
})
.catch(error => {console.error('로그 목록 조회 실패: ', error);})
}
},
watch: {},
computed: {
...mapGetters([
'getMemId',
'getMemNm',
'getMemLoginId'
])
},
components: {},
created() {},
mounted() {
console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
this.loadLogs();
},
beforeUnmount() {},
};
</script>