Skip to content

M
mySkill-x
Commit f92737db by Ooh-Ao
Options

com12

parent 1816494e
Showing with 339 additions and 1 deletions
src/app/components/report-component/report-com/report-com-1/report-com-1.component.html
<app-page-header
[title]="'รายงานภาพรวม Competency ขององค์กร'"
activeitem="รายงาน">
</app-page-header>
<section class="report-wrap">
<!-- ── หัวเรื่อง ── -->
<header class="title-box">
<h1 class="big-title">รายงานภาพรวม <span>Competency</span> ขององค์กร</h1>
<h2 class="sub-title">จำนวนพนักงาน <span class="emp-num">200 คน</span></h2>
</header>
<!-- ── ตาราง 3 ช่อง ── -->
<div class="grid-table">
<!-- ปีที่แล้ว -->
<div class="tbl-card">
<h3 class="tbl-head">ปีก่อนหน้า</h3>
<table>
<thead><tr><th>สรุปผลประเมิน</th><th>%</th></tr></thead>
<tbody>
<tr *ngFor="let r of lastYear"><td>{{ r.label }}</td><td>{{ r.value }}</td></tr>
</tbody>
</table>
</div>
<!-- ปีปัจจุบัน -->
<div class="tbl-card">
<h3 class="tbl-head">ปีปัจจุบัน</h3>
<table>
<thead><tr><th>สรุปผลประเมิน</th><th>%</th></tr></thead>
<tbody>
<tr *ngFor="let r of thisYear"><td>{{ r.label }}</td><td>{{ r.value }}</td></tr>
</tbody>
</table>
</div>
<!-- สรุปคะแนน -->
<div class="tbl-card">
<h3 class="tbl-head">สรุปคะแนนรวม</h3>
<table>
<thead><tr><th></th><th>%</th></tr></thead>
<tbody>
<tr *ngFor="let r of summary"><td>{{ r.label }}</td><td>{{ r.value }}</td></tr>
</tbody>
</table>
</div>
</div>
<!-- ── Progress Section ── -->
<div class="progress-card">
<div class="bar-row">
<span class="bar-label">Status ประเมิน :</span>
<div class="bar-track">
<div class="bar-fill" [style.width.%]="statusEvaluate * 100"></div>
</div>
<span class="bar-val">{{ statusEvaluate * 100 | number:'1.0-0' }}%</span>
<span class="bar-date">วันที่ประเมินล่าสุด : 20 ก.พ. 2568</span>
</div>
<div class="bar-row">
<span class="bar-label">Status IDP :</span>
<div class="bar-track">
<div class="bar-fill blue" [style.width.%]="statusIdp * 100"></div>
</div>
<span class="bar-val">{{ statusIdp * 100 | number:'1.0-0' }}%</span>
<span class="bar-date">วันที่ทำ IDP ล่าสุด : 10 พ.ค. 2568</span>
</div>
<div class="bar-row">
<span class="bar-label">Status การพัฒนา :</span>
<div class="bar-track">
<div class="bar-fill indigo" [style.width.%]="statusDev * 100"></div>
</div>
<span class="bar-val">ปิด GAP {{ statusDev * 100 | number:'1.0-0' }}%</span>
<span class="bar-date">วันที่พัฒนาล่าสุด : 20 พ.ค. 2568</span>
</div>
</div>
<!-- ── footer note ── -->
<footer class="note">ข้อมูล ณ วันที่ : {{ today }}</footer>
</section>
src/app/components/report-component/report-com/report-com-1/report-com-1.component.scss
/* ─── สี & ระยะ ─── */
$blue-50:#eff6ff; $blue-600:#2563eb; $slate-600:#475569; $gray-100:#f1f5f9;
$radius:.75rem; $shadow:0 14px 28px -16px rgba(0,0,0,.16);
$shadow-h:0 18px 42px -16px rgba(0,0,0,.24);
/* ─── Wrapper ─── */
.report-wrap{
max-width: 1200px;
margin-inline:auto;
padding-inline:1rem;
display:flex; flex-direction:column; gap:2.5rem;
}
/* ─── Headings ─── */
.title-box{ text-align:center; }
.big-title{
font:700 1.9rem/1.25 'Inter',sans-serif; color:$slate-600;
span{ color:$blue-600; }
}
.sub-title{ font:600 1.35rem/1.3 'Inter',sans-serif; color:$blue-600;
.emp-num{ font-size:1.6rem; }
}
/* ─── Tables ─── */
.grid-table{
display:grid; gap:1.5rem;
@media(min-width:768px){ grid-template-columns:repeat(3,1fr); }
}
.tbl-card{
background:#fff; border-radius:$radius; box-shadow:$shadow; overflow:hidden;
transition:.35s;
&:hover{ transform:translateY(-5px); box-shadow:$shadow-h; }
}
.tbl-head{
background:$blue-600; color:#fff; font-weight:600;
padding:.75rem 1rem; text-align:center;
}
table{ width:100%; font-size:.9rem; text-align:center;
th,td{ padding:.6rem .5rem; }
tbody tr:nth-child(even){ background:$blue-50; }
}
/* ─── Progress card ─── */
.progress-card{
background:#fff; border-radius:$radius; box-shadow:$shadow;
padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.bar-row{
display:grid; grid-template-columns:140px 1fr 50px auto; gap:.75rem; align-items:center;
font-size:.9rem;
@media(max-width:640px){ grid-template-columns:100px 1fr 45px; row-gap:.4rem; }
}
/* bar visual */
.bar-track{
height:.55rem; background:$gray-100; border-radius:9999px; overflow:hidden;
.bar-fill{
height:100%; background:$blue-600; border-radius:inherit; transition:width .4s;
&.blue{ background:#3b82f6; } &.indigo{ background:#6366f1; }
}
}
.bar-label{ color:$slate-600; font-weight:500; white-space:nowrap; }
.bar-val { font-weight:600; color:$slate-600; }
.bar-date { color:$slate-600; font-size:.8rem; white-space:nowrap; }
/* ─── Note ─── */
.note{
text-align:right; font-weight:500; color:$slate-600;
}
/* ─── Hover glow (card) ─── */
.tbl-card:hover,
.progress-card:hover{
&::before{
content:''; position:absolute; inset:0; pointer-events:none;
border-radius:inherit; padding:1px;
background:linear-gradient(135deg,#3b82f6,#818cf8 60%,#a855f7);
mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
mask-composite:exclude; opacity:.5;
}
}
src/app/components/report-component/report-com/report-com-1/report-com-1.component.ts
import { Component } from '@angular/core';
interface Row { label: string; value: number | string; }
@Component({
selector: 'app-report-com-1',
templateUrl: './report-com-1.component.html',
styleUrls: ['./report-com-1.component.scss']
})
export class ReportCom1Component {
// ตารางซ้าย-กลาง
lastYear: Row[] = [
{ label: 'CC', value: 70 },
{ label: 'MC', value: 70 },
{ label: 'FC', value: 70 },
{ label: 'PC', value: 70 },
{ label: 'รวม', value: 70 }
];
thisYear: Row[] = [
{ label: 'CC', value: 80 },
{ label: 'MC', value: 80 },
{ label: 'FC', value: 80 },
{ label: 'PC', value: 80 },
{ label: 'รวม', value: 80 }
];
// ตารางสรุปคะแนน
summary: Row[] = [
{ label: 'ปีที่ผ่านมา', value: 70 },
{ label: 'ปีปัจจุบัน', value: 80 },
{ label: 'DIF', value: '+/- 10' }
];
// Progress bar mock
statusEvaluate = 1; // 1 = 100 %
statusIdp = .5; // 0.5 = 50 %
statusDev = 0; // 0 = 0 %
today = '1 มิ.ย. 2568';
}
src/app/components/report-component/report-com/report-com-2/report-com-2.component.html
<app-page-header
[title]="'รายงานภาพรวม Competency ของหน่วยงาน'"
activeitem="รายงาน">
</app-page-header>
<section class="report-wrap">
<!-- ── Head ── -->
<header class="title-box">
<h1 class="big-title">
รายงานภาพรวม <span>Competency</span> ของหน่วยงาน
</h1>
<h2 class="sub-title">
จำนวนพนักงาน <span class="emp-num">100 คน</span>
</h2>
</header>
<!-- ── 3 tables ── -->
<div class="grid-table">
<!-- ปีที่ผ่านมา -->
<div class="tbl-card">
<h3 class="tbl-head">ปีก่อนหน้า</h3>
<table>
<thead><tr><th>สรุปผลประเมิน</th><th>%</th></tr></thead>
<tbody>
<tr><td>CC</td><td>70</td></tr>
<tr><td>MC</td><td>70</td></tr>
<tr><td>FC</td><td>70</td></tr>
<tr><td>PC</td><td>70</td></tr>
<tr><td>รวม</td><td>70</td></tr>
</tbody>
</table>
</div>
<!-- ปีปัจจุบัน -->
<div class="tbl-card">
<h3 class="tbl-head">ปีปัจจุบัน</h3>
<table>
<thead><tr><th>สรุปผลประเมิน</th><th>%</th></tr></thead>
<tbody>
<tr><td>CC</td><td>80</td></tr>
<tr><td>MC</td><td>80</td></tr>
<tr><td>FC</td><td>80</td></tr>
<tr><td>PC</td><td>80</td></tr>
<tr><td>รวม</td><td>80</td></tr>
</tbody>
</table>
</div>
<!-- สรุปรวม -->
<div class="tbl-card">
<h3 class="tbl-head">สรุปคะแนนรวม</h3>
<table>
<thead><tr><th></th><th>%</th></tr></thead>
<tbody>
<tr><td>ปีก่อนหน้า</td><td>70</td></tr>
<tr><td>ปีปัจจุบัน</td><td>80</td></tr>
<tr><td>DIF</td><td>+/- 10</td></tr>
</tbody>
</table>
</div>
</div>
<!-- ── Progress ── -->
<div class="progress-card">
<div class="bar-row">
<span class="bar-label">Status ประเมิน :</span>
<div class="bar-track"><div class="bar-fill" style="width:100%"></div></div>
<span class="bar-val">100%</span>
<span class="bar-date">วันที่ประเมินล่าสุด : 20 ก.พ. 2568</span>
</div>
<div class="bar-row">
<span class="bar-label">Status IDP :</span>
<div class="bar-track">
<div class="bar-fill blue" style="width:50%"></div>
</div>
<span class="bar-val">50%</span>
<span class="bar-date">วันที่ทำ IDP ล่าสุด : 10 พ.ค. 2568</span>
</div>
<div class="bar-row">
<span class="bar-label">Status การพัฒนา :</span>
<div class="bar-track">
<div class="bar-fill indigo" style="width:0%"></div>
</div>
<span class="bar-val">ปิด GAP 0%</span>
<span class="bar-date">วันที่พัฒนาล่าสุด : 20 พ.ค. 2568</span>
</div>
</div>
<footer class="note">ข้อมูล ณ วันที่ : 1 มิ.ย. 2568</footer>
</section>
src/app/components/report-component/report-com/report-com-2/report-com-2.component.scss
/* === สี / รัศมี / เงา === */
$blue-50 : #eff6ff; $blue-600:#2563eb;
$slate-600:#475569; $gray-100:#f1f5f9;
$radius: .75rem; $shadow:0 14px 28px -16px rgba(0,0,0,.16);
$shadow-h:0 20px 42px -18px rgba(0,0,0,.25);
$dur:.35s; $ease:cubic-bezier(.4,0,.2,1);
/* ---------- layout ---------- */
.report-wrap{max-width:1200px;margin:auto;padding:2rem 1rem;display:flex;flex-direction:column;gap:2.5rem}
.title-box{text-align:center}
.big-title{font:700 2rem/1.25 'Inter',sans-serif;color:$slate-600;span{color:$blue-600}}
.sub-title{font:600 1.4rem/1.25 'Inter',sans-serif;color:$blue-600;.emp-num{font-size:1.65rem}}
.grid-table{display:grid;gap:1.5rem;@media(min-width:768px){grid-template-columns:repeat(3,1fr)}}
.tbl-card{background:#fff;border-radius:$radius;box-shadow:$shadow;overflow:hidden;transition:$dur;
&:hover{transform:translateY(-5px);box-shadow:$shadow-h}}
.tbl-head{background:$blue-600;color:#fff;font-weight:600;padding:.75rem 1rem;text-align:center}
table{width:100%;font-size:.9rem;text-align:center;th,td{padding:.6rem .5rem}
tbody tr:nth-child(even){background:$blue-50}}
.progress-card{background:#fff;border-radius:$radius;box-shadow:$shadow;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.bar-row{display:grid;grid-template-columns:140px 1fr 60px auto;gap:.75rem;align-items:center;font-size:.9rem;
@media(max-width:640px){grid-template-columns:110px 1fr 50px}}
.bar-label{font-weight:500;color:$slate-600;white-space:nowrap}
.bar-track{height:.55rem;background:$gray-100;border-radius:9999px;overflow:hidden;position:relative}
.bar-fill{height:100%;background:$blue-600;border-radius:inherit;transition:width .4s;&.blue{background:#3b82f6}&.indigo{background:#6366f1}}
.bar-val{font-weight:600;color:$slate-600}
.bar-date{font-size:.8rem;color:$slate-600;white-space:nowrap}
.note{text-align:right;font-weight:500;color:$slate-600}
/* hover glow for cards */
.tbl-card:hover,.progress-card:hover{
&::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(135deg,#3b82f6,#818cf8 60%,#a855f7);
mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
opacity:.5;pointer-events:none}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment