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="side-content">
<div class="myinfo">
<div class="name-box">
<div class="img-area">
<div><img :src="photoicon" alt="">
<p class="name">OOO과장</p>
</div>
<div class="info">
<p>솔루션 개발팀</p>
<i class="fa-bars"></i>
<p>팀장</p>
</div>
</div>
</div>
<ul class="info-box">
<li>
<p>5</p>
<div class="name yellow">신청</div>
</li>
<li>
<p>5</p>
<div class="name ">대기</div>
</li>
<li>
<p>5</p>
<div class="name blue">승인</div>
</li>
<li>
<p>5</p>
<div class="name red">결제</div>
</li>
</ul>
</div>
<div class="boxs">
<div class="box">
<div class="img-area"><img :src="img1" alt=""></div>
<div class="sm-box">
<h3>연차 잔여일수</h3>
<p>11.5</p>
</div>
</div>
<div class="bd-box">
<div>전체 <span>15</span></div>
<i class="fa-bars"></i>
<div>사용 <span style="color: #E92727;">3.5</span></div>
</div>
</div>
<div class="boxs">
<h4><img :src="icon1" alt="">01월 근태현황</h4>
<div class="color-boxs">
<div class="box red">
<h3>지각</h3>
3
</div>
<div class="box">
<h3>조기퇴근</h3>
3
</div>
<div class="box green">
<h3>결근</h3>
3
</div>
</div>
</div>
</div>
<div class="card" style="height: 100%;">
<div class="card-body">
<div class="grid-wrap gap30" style="height: 100%; grid-template-columns: minmax(845px, auto) 550px; grid-template-rows: minmax(512px, auto) 243px;">
<div style="width: 100%;">
<GoogleCalendar />
</div>
<div class="schedule-zone">
<div class="commute">
<div class="title d-flex align-center justify-between mb10">
<h2>근무체크 <span>출근전</span></h2>
<div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
</div>
<div class="blue-box">
<div class="box mb10">
<p class="time">{{ time }}</p>
</div>
<div class="d-flex justify-between align-center">
<button><img :src="startbtn" alt=""></button>
<i class="fa-bars"></i>
<button><img :src="stopbtn" alt=""></button>
</div>
</div>
</div>
<div class="boxs today-event">
<div class="title">
<h2>오늘 일정 요약</h2>
</div>
<ul>
<li v-for="(event, index) in todayEvents" :key="index">
<div class="grid-wrap gap10">
<p class="category">{{ event.category }}</p>
<p class="name">{{ event.name }} {{ event.position }}</p>
<p class="department">{{ event.department }}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="boxs" style="grid-column: 1 / 3 ;">
<div class="title d-flex justify-between align-center">
<h2>프로젝트 현황</h2>
<div class="sub">더보기<img :src="moreicon" alt=""></div>
</div>
<div class="board tbl-wrap">
<table class="tbl data common-radius">
<colgroup>
<col style="width: 15%;">
<col style="width: 38%;">
<col style="width: 32%;">
<col style="width: 15%;">
</colgroup>
<tbody>
<tr v-for="(item, index) in requestList" :key="index" >
<td :class="getCategoryClass(item.category)" >
<p>{{ item.category }}</p>
</td>
<td>{{ item.name }}</td>
<td>{{ item.startdate }} ~ {{ item.enddate }}</td>
<td class="status" :class="getStatusClass(item.status)">
<p>{{ item.status }}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../component/GoogleCalendar.vue"
export default {
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
img1: "/client/resources/img/img.png",
icon1: "/client/resources/img/icon.png",
dateicon: "/client/resources/img/date.png",
startbtn: "/client/resources/img/start.png",
stopbtn: "/client/resources/img/stop.png",
moreicon: "/client/resources/img/more.png",
today: new Date().toLocaleDateString('ko-KR', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
weekday: 'short',
}),
time: this.getCurrentTime(),
requestList: [
{ category: '용역', name: '프로젝트1', startdate: '2025-04-30', enddate: '2025-04-30', status: '진행중' },
{ category: '내부', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '진행전' },
{ category: '내부', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '진행전' },
{ category: '내부', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '진행전' },
{ category: '국가과제', name: '프로젝트2', startdate: '2025-05-01', enddate: '2025-04-30', status: '완료' }
],
todayEvents: [
{ name: '홍길동', position: '대리', department: '인사팀', category: '연차' },
{ name: '김민수', position: '과장', department: '영업팀', category: '출장' },
{ name: '이영희', position: '사원', department: '마케팅팀', category: '회의' },
{ name: '박지훈', position: '팀장', department: '개발팀', category: '교육' },
]
}
},
methods: {
getCurrentTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
},
getCategoryClass(category) {
switch (category) {
case '용역': return 'category-service';
case '내부': return 'category-internal';
case '국가과제': return 'category-government';
default: return '';
}
},
getStatusClass(status) {
switch (status) {
case '진행중': return 'status-in-progress';
case '진행전': return 'status-not-started';
case '완료': return 'status-complete';
default: return '';
}
}
},
watch: {
},
computed: {
},
components: {
GoogleCalendar,
},
mounted() {
console.log('main mounted');
setInterval(() => {
this.time = this.getCurrentTime();
}, 1000);
}
}
</script>
<style scoped>
td{padding: 7px 10px !important; height: auto !important;}
td p{display: flex; justify-self: center; justify-content: center; text-align: center !important;}
tr:last-child td{border-bottom: 0 !important;}
</style>