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="content">
<div class="top-content">
<div class="boxs">
<div class="title">
<h2>근무체크 <span>출근전</span></h2>
<div class="sub"><img :src="dateicon" alt="">{{ today }}</div>
</div>
<div class="blue-box">
<div class="box">
<p class="time">{{ time }}</p>
</div>
<div class="buttons">
<button><img :src="startbtn" alt=""></button>
<i class="fa-bars"></i>
<button><img :src="stopbtn" alt=""></button>
</div>
</div>
</div>
<div class="boxs" style="width: 100%;">
<div class="title">
<h2>프로젝트 현황</h2>
<div class="sub">더보기<img :src="moreicon" alt=""></div>
</div>
<div class="board tbl-wrap">
<table class="tbl data">
<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 class="schedule-zone">
<GoogleCalendar />
<div class="boxs">
<div class="title">
<h2>오늘의 주요 일정</h2>
<!-- <div class="sub">더보기<img :src="moreicon" alt=""></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: '완료' }
]
}
},
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>