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" @click="goToModelingCreate"></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="project in projects" :key="project.id" class="box-item" @click="goToModelingUpdate(project)">
<div class="layout center space-between mb10">
<div class="box-title" >{{ project.name }}</div>
<div class="date" >{{ project.date }}</div>
</div>
<img :src="project.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="project in alarms" :key="project.groupId" @click="goToFeedback">
<div class="layout center gap10">
<img src="../../../resources/img/content/ico_alram.svg" alt="">
<p><span>{{ project.name }}</span>에 피드백 <span>{{ project.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';
import { findAllProjectsProc } from '../../../resources/api/asset';
import { findUncheckedFeedbacks } from '../../../resources/api/feedback';
export default {
data() {
return {
// 프로젝트 목록
projects: [
// { 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);})
},
// 프로젝트 목록 가져오기(대표 프로젝트만 화면에서 조회)
loadMainProjects() {
findAllProjectsProc({
memberId: this.getMemId,
isMain: 'Y' // 대표 프로젝트
})
.then(response => {
const projectList = response.data.result.projects;
this.projects = projectList.map(project => ({
id: project.projectId,
groupId: project.projectGroupId,
isMain: project.isMain,
name: project.projectName,
date: project.createdAt,
img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
}));
})
.catch(error => {console.error('자산 목록 조회 실패: ', error);})
},
// 모델링 페이지로 이동(생성)
goToModelingCreate() {
this.$router.push('/modeling.page');
},
// 모델링 페이지로 이동(기존 프로젝트 수정 - 기존 정보 가져옴)
goToModelingUpdate(project) {
this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
},
// 피드백 페이지로 이동
goToFeedback() {
this.$router.push('/feedback.page');
},
// 미확인 피드백 알림 목록 가져오기
loadFeedbackAlarms() {
findUncheckedFeedbacks({
memberId: this.getMemId
})
.then(response => {
const alarms = response.data.result;
this.alarms = alarms.map(alarm => ({
groupId: alarm.projectGroupId,
name: alarm.projectName,
count: alarm.unCheckedFeedbackCnt
}));
})
.catch(error => {console.error('미확인 피드백 조회 실패: ', error);})
},
},
watch: {},
computed: {
...mapGetters([
'getMemId',
'getMemNm',
'getMemLoginId'
])
},
components: {},
created() {},
mounted() {
console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
this.loadLogs();
this.loadMainProjects();
this.loadFeedbackAlarms();
},
beforeUnmount() {},
};
</script>