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="card ">
<div class="card-body">
<h2 class="card-title">투입 현황</h2>
<div class="name-box flex sb simple">
<div class="img-area">
<div class="img"><img :src="photoicon" alt="">
</div>
</div>
<form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
@submit.prevent="handleRegister" novalidate>
<div class="col-12">
<label for="yourName" class="form-label">아이디</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
<div class="col-12 ">
<div class="col-12 border-x">
<label for="youremail" class="form-label ">이름<p class="require"><img :src="require" alt=""></p></label>
<input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">부서</label>
<input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
required readonly placeholder="주식회사 테이큰 소프트">
</div>
</div>
<div class="col-12 border-x">
<div class="col-12 border-x">
<label for="youremail" class="form-label">직급</label>
<input v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly
placeholder="과장">
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">직책</label>
<input v-model="password" type="password" name="password" class="form-control" id="yourPassword"
required readonly placeholder="팀장">
</div>
</div>
</form>
</div>
<GoogleCalendar />
<div class="tbl-wrap" style="margin-top: 3rem;">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>구분 </th>
<th>프로젝트명</th>
<th>PM</th>
<th>사업비</th>
<th>기간</th>
<th>상태</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index" :class="{ 'expired': isPastStatus(item.status) }" >
<td>{{ item.type }}</td>
<td>{{ item.projectName }}</td>
<td>{{ item.pm }}</td>
<td>{{ formatBudget(item.budget) }}</td>
<td>{{ item.period }}</td>
<td :class="getStatusClass(item.status)">
{{ item.status }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons">
<button type="submit" class="btn sm tertiary">목록</button>
</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(),
listData: [
{
type: '내부',
projectName: 'AI 개발 프로젝트',
pm: '홍길동',
budget: 50000000,
period: '2024-01-01 ~ 2024-12-31',
status: '진행중'
},
{
type: '외부',
projectName: '웹 리뉴얼',
pm: '김영희',
budget: 20000000,
period: '2023-01-01 ~ 2023-12-31',
status: '미진행'
},
{
type: '외부',
projectName: '웹 리뉴얼',
pm: '김영희',
budget: 20000000,
period: '2023-01-01 ~ 2023-12-31',
status: '완료'
}
]
}
},
methods: {
formatBudget(amount) {
return new Intl.NumberFormat().format(amount) + ' 원';
},
getStatusClass(status) {
return status === 'active' ? 'status-active' : 'status-inactive';
},
getStatusClass(status) {
if (status === '완료') return 'status-green';
if (status === '진행중') return 'status-approved';
if (status === '미진행') return 'status-pending';
return '';
},
isPastStatus(status) {
return status === '완료' ; // 조건은 필요 시 조정
},
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 '';
}
},
},
watch: {
},
computed: {
},
components: {
GoogleCalendar,
},
mounted() {
console.log('main mounted');
setInterval(() => {
this.time = this.getCurrentTime();
}, 1000);
}
}
</script>
<style scoped>
tr{cursor: pointer;}
</style>