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
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>