345 lines
13 KiB
Vue
345 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<AppHeader />
|
|
|
|
<div class="container-fluid py-4">
|
|
<!-- 헤더 -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="mb-1">
|
|
<i class="bi bi-speedometer2 me-2"></i>리소스 현황
|
|
</h4>
|
|
<p class="text-muted mb-0">
|
|
{{ currentWeek.year }}년 {{ currentWeek.week }}주차
|
|
({{ currentWeek.startDateStr }} ~ {{ currentWeek.endDateStr }})
|
|
</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<select class="form-select form-select-sm" style="width: 100px;" v-model="selectedYear" @change="loadStats">
|
|
<option v-for="y in yearOptions" :key="y" :value="y">{{ y }}년</option>
|
|
</select>
|
|
<select class="form-select form-select-sm" style="width: 90px;" v-model="selectedWeek" @change="loadStats">
|
|
<option v-for="w in weekOptions" :key="w" :value="w">{{ w }}주</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 요약 카드 -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-2">
|
|
<div class="card h-100 border-primary">
|
|
<div class="card-body text-center">
|
|
<div class="text-muted small">제출현황</div>
|
|
<h3 class="mb-0">
|
|
<span class="text-primary">{{ stats.summary.submittedCount }}</span>
|
|
<span class="text-muted">/{{ stats.summary.activeEmployees }}</span>
|
|
</h3>
|
|
<div class="small" :class="stats.summary.notSubmittedCount > 0 ? 'text-danger' : 'text-success'">
|
|
{{ stats.summary.notSubmittedCount > 0 ? `${stats.summary.notSubmittedCount}명 미제출` : '전원 제출' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="card h-100 border-success">
|
|
<div class="card-body text-center">
|
|
<div class="text-muted small">금주 실적</div>
|
|
<h3 class="mb-0 text-success">{{ formatHours(stats.summary.totalWorkHours) }}</h3>
|
|
<div class="small text-muted">{{ stats.summary.projectCount }}개 프로젝트</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="card h-100 border-info">
|
|
<div class="card-body text-center">
|
|
<div class="text-muted small">차주 계획</div>
|
|
<h3 class="mb-0 text-info">{{ formatHours(stats.summary.totalPlanHours) }}</h3>
|
|
<div class="small text-muted">예정 업무량</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center">
|
|
<div class="text-muted small">평균 업무시간</div>
|
|
<h3 class="mb-0">{{ formatHours(avgWorkHours) }}</h3>
|
|
<div class="small text-muted">인당 (40h 기준)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card h-100">
|
|
<div class="card-body text-center">
|
|
<div class="text-muted small">리소스 현황</div>
|
|
<div class="d-flex justify-content-around mt-1">
|
|
<div>
|
|
<span class="badge bg-success">{{ resourceStatus.available }}</span>
|
|
<div class="small text-muted">여유</div>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-primary">{{ resourceStatus.normal }}</span>
|
|
<div class="small text-muted">정상</div>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-danger">{{ resourceStatus.overload }}</span>
|
|
<div class="small text-muted">과부하</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<!-- 인원별 현황 -->
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-people me-2"></i>인원별 업무 현황</span>
|
|
<div class="small text-muted">
|
|
<span class="badge bg-success me-1">~32h</span>
|
|
<span class="badge bg-primary me-1">32~48h</span>
|
|
<span class="badge bg-danger">48h~</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
|
|
<table class="table table-sm table-hover mb-0">
|
|
<thead class="table-light sticky-top">
|
|
<tr>
|
|
<th>이름</th>
|
|
<th class="text-center" style="width: 80px;">금주실적</th>
|
|
<th class="text-center" style="width: 80px;">차주계획</th>
|
|
<th class="text-center" style="width: 60px;">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="emp in stats.employees" :key="emp.employeeId"
|
|
:class="{ 'table-light text-muted': !emp.isSubmitted }">
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<span :class="getWorkloadBadge(emp.workHours)" class="me-2" style="width: 8px; height: 8px; border-radius: 50%; display: inline-block;"></span>
|
|
<div>
|
|
<div>{{ emp.employeeName }}</div>
|
|
<div class="small text-muted">{{ emp.company || '' }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<span v-if="emp.isSubmitted" :class="getWorkloadClass(emp.workHours)">
|
|
{{ emp.workHours }}h
|
|
</span>
|
|
<span v-else class="text-muted">-</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span v-if="emp.isSubmitted" :class="getWorkloadClass(emp.planHours)">
|
|
{{ emp.planHours }}h
|
|
</span>
|
|
<span v-else class="text-muted">-</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<span v-if="emp.isSubmitted" class="badge bg-success">제출</span>
|
|
<span v-else class="badge bg-secondary">미제출</span>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="stats.employees.length === 0">
|
|
<td colspan="4" class="text-center py-4 text-muted">데이터가 없습니다.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 프로젝트별 현황 -->
|
|
<div class="col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<i class="bi bi-briefcase me-2"></i>프로젝트별 투입 현황
|
|
</div>
|
|
<div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
|
|
<table class="table table-sm table-hover mb-0">
|
|
<thead class="table-light sticky-top">
|
|
<tr>
|
|
<th>프로젝트</th>
|
|
<th class="text-center" style="width: 60px;">인원</th>
|
|
<th class="text-center" style="width: 80px;">금주실적</th>
|
|
<th class="text-center" style="width: 80px;">차주계획</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="proj in stats.projects" :key="proj.projectId">
|
|
<td>
|
|
<div>{{ proj.projectName }}</div>
|
|
<div class="small text-muted">{{ proj.members.slice(0, 3).join(', ') }}{{ proj.members.length > 3 ? ` 외 ${proj.members.length - 3}명` : '' }}</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-primary">{{ proj.memberCount }}명</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<strong>{{ proj.workHours }}h</strong>
|
|
</td>
|
|
<td class="text-center text-info">
|
|
{{ proj.planHours }}h
|
|
</td>
|
|
</tr>
|
|
<tr v-if="stats.projects.length === 0">
|
|
<td colspan="4" class="text-center py-4 text-muted">데이터가 없습니다.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 하단: 빠른 링크 -->
|
|
<div class="row g-3 mt-3">
|
|
<div class="col-md-3">
|
|
<NuxtLink to="/report/weekly/write" class="card text-decoration-none h-100">
|
|
<div class="card-body text-center py-3">
|
|
<i class="bi bi-plus-circle display-6 text-primary"></i>
|
|
<div class="mt-2">주간보고 작성</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<NuxtLink to="/report/weekly" class="card text-decoration-none h-100">
|
|
<div class="card-body text-center py-3">
|
|
<i class="bi bi-journal-text display-6 text-success"></i>
|
|
<div class="mt-2">주간보고 목록</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="col-md-3" v-if="isAdmin">
|
|
<NuxtLink to="/report/summary" class="card text-decoration-none h-100">
|
|
<div class="card-body text-center py-3">
|
|
<i class="bi bi-collection display-6 text-info"></i>
|
|
<div class="mt-2">취합 보고서</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<NuxtLink to="/project" class="card text-decoration-none h-100">
|
|
<div class="card-body text-center py-3">
|
|
<i class="bi bi-briefcase display-6 text-warning"></i>
|
|
<div class="mt-2">프로젝트 관리</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { currentUser, fetchCurrentUser } = useAuth()
|
|
const { getCurrentWeekInfo } = useWeekCalc()
|
|
const router = useRouter()
|
|
|
|
const currentWeek = getCurrentWeekInfo()
|
|
const isAdmin = ref(false)
|
|
|
|
const currentYear = new Date().getFullYear()
|
|
const yearOptions = [currentYear, currentYear - 1]
|
|
const weekOptions = Array.from({ length: 53 }, (_, i) => i + 1)
|
|
|
|
const selectedYear = ref(currentWeek.year)
|
|
const selectedWeek = ref(currentWeek.week)
|
|
|
|
const stats = ref<any>({
|
|
summary: {
|
|
activeEmployees: 0,
|
|
submittedCount: 0,
|
|
notSubmittedCount: 0,
|
|
totalWorkHours: 0,
|
|
totalPlanHours: 0,
|
|
projectCount: 0
|
|
},
|
|
employees: [],
|
|
projects: []
|
|
})
|
|
|
|
// 평균 업무시간 (제출자 기준)
|
|
const avgWorkHours = computed(() => {
|
|
const submitted = stats.value.employees.filter((e: any) => e.isSubmitted)
|
|
if (submitted.length === 0) return 0
|
|
const total = submitted.reduce((sum: number, e: any) => sum + e.workHours, 0)
|
|
return Math.round(total / submitted.length)
|
|
})
|
|
|
|
// 리소스 현황 (여유/정상/과부하)
|
|
const resourceStatus = computed(() => {
|
|
const submitted = stats.value.employees.filter((e: any) => e.isSubmitted)
|
|
return {
|
|
available: submitted.filter((e: any) => e.workHours < 32).length,
|
|
normal: submitted.filter((e: any) => e.workHours >= 32 && e.workHours <= 48).length,
|
|
overload: submitted.filter((e: any) => e.workHours > 48).length
|
|
}
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const user = await fetchCurrentUser()
|
|
if (!user) {
|
|
router.push('/login')
|
|
return
|
|
}
|
|
|
|
isAdmin.value = user.employeeEmail === 'coziny@gmail.com'
|
|
await loadStats()
|
|
})
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const res = await $fetch<any>('/api/dashboard/stats', {
|
|
query: { year: selectedYear.value, week: selectedWeek.value }
|
|
})
|
|
stats.value = res
|
|
} catch (e) {
|
|
console.error('Dashboard stats error:', e)
|
|
}
|
|
}
|
|
|
|
function formatHours(hours: number): string {
|
|
if (!hours || hours <= 0) return '0h'
|
|
const days = Math.floor(hours / 8)
|
|
const remain = hours % 8
|
|
if (days === 0) return `${hours}h`
|
|
if (remain === 0) return `${days}일`
|
|
return `${days}일 ${remain}h`
|
|
}
|
|
|
|
function getWorkloadBadge(hours: number): string {
|
|
if (hours < 32) return 'bg-success'
|
|
if (hours <= 48) return 'bg-primary'
|
|
return 'bg-danger'
|
|
}
|
|
|
|
function getWorkloadClass(hours: number): string {
|
|
if (hours < 32) return 'text-success'
|
|
if (hours <= 48) return ''
|
|
return 'text-danger fw-bold'
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
border-radius: 0.5rem;
|
|
}
|
|
.card-header {
|
|
background-color: #f8f9fa;
|
|
font-weight: 500;
|
|
}
|
|
.sticky-top {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
a.card:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
</style>
|