Initial commit
This commit is contained in:
Viet An
220
app/components/viewer/Kpi.vue
Normal file
220
app/components/viewer/Kpi.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<script setup>
|
||||
import KpiRow from '@/components/viewer/KpiRow.vue';
|
||||
|
||||
const costChartOptions = {
|
||||
chart: {
|
||||
type: 'column',
|
||||
},
|
||||
title: {
|
||||
text: null,
|
||||
},
|
||||
credits: {
|
||||
enabled: false,
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Nguyễn Văn An',
|
||||
'Lê Hoàng Cường',
|
||||
'Hoàng Văn Phúc',
|
||||
'Bùi Văn Hải',
|
||||
],
|
||||
crosshair: true,
|
||||
accessibility: {
|
||||
description: 'Tháng',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Triệu VNĐ',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' (triệu VNĐ)',
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
pointPadding: 0.1,
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Chỉ tiêu',
|
||||
data: [180, 120, 210, 240],
|
||||
},
|
||||
{
|
||||
name: 'Đạt được',
|
||||
data: [190, 136, 210, 248],
|
||||
},
|
||||
],
|
||||
colors: ['#ddddee', '#2caffe'],
|
||||
};
|
||||
|
||||
const kpis = [
|
||||
{
|
||||
empcode: 'EMP001',
|
||||
empname: 'Nguyễn Văn An',
|
||||
title: 'Trưởng phòng',
|
||||
target: '500000000.00',
|
||||
reached: '520000000.00',
|
||||
progress: 104,
|
||||
evaluation: 'Đạt',
|
||||
},
|
||||
{
|
||||
empcode: 'EMP003',
|
||||
empname: 'Lê Hoàng Cường',
|
||||
title: 'Nhân viên kinh doanh',
|
||||
target: '200000000.00',
|
||||
reached: '235000000.00',
|
||||
progress: 118,
|
||||
evaluation: 'Đạt',
|
||||
},
|
||||
{
|
||||
empcode: 'EMP006',
|
||||
empname: 'Hoàng Văn Phúc',
|
||||
title: 'Nhân viên kinh doanh',
|
||||
target: '180000000.00',
|
||||
reached: '165000000.00',
|
||||
progress: 92,
|
||||
evaluation: 'Gần đạt',
|
||||
},
|
||||
{
|
||||
empcode: 'EMP008',
|
||||
empname: 'Bùi Văn Hải',
|
||||
title: 'Quản lý showroom',
|
||||
target: '800000000.00',
|
||||
reached: '855000000.00',
|
||||
progress: 106,
|
||||
evaluation: 'Đạt',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4 has-text-grey">KPI trung bình</p>
|
||||
<p class="title is-4 mb-0">104.9%</p>
|
||||
<p class="has-text-grey fs-14">Trung bình toàn công ty</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4 has-text-grey">Nhân viên đạt KPI</p>
|
||||
<p class="title is-4 mb-0">3</p>
|
||||
<p class="has-text-grey fs-14">/4 nhân viên</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4 has-text-grey">Chưa đạt KPI</p>
|
||||
<p class="title is-4 mb-0">1</p>
|
||||
<p class="has-text-grey fs-14">Cần hỗ trợ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4 has-text-grey">Tổng doanh số</p>
|
||||
<p class="title is-4 mb-0">1.8B</p>
|
||||
<p class="has-text-grey fs-14">VNĐ</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content is-flex is-gap-2 is-align-items-center">
|
||||
<p>Kỳ đánh giá</p>
|
||||
<div class="select">
|
||||
<select style="width: 300px">
|
||||
<option>Tháng 1/2026</option>
|
||||
<option>Tháng 2/2026</option>
|
||||
<option>Tháng 3/2026</option>
|
||||
<option>Quý 1/2026</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4">Biểu đồ hiệu suất KPI</p>
|
||||
<highcharts
|
||||
style="max-width: 1000px"
|
||||
class="mx-auto"
|
||||
:options="costChartOptions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4">Bảng theo dõi KPI</p>
|
||||
<table class="table is-fullwidth is-narrow fs-14">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mã NV</th>
|
||||
<th>Họ tên</th>
|
||||
<th>Chức vụ</th>
|
||||
<th>Chỉ tiêu</th>
|
||||
<th>Đạt được</th>
|
||||
<th class="is-narrow">Tiến độ</th>
|
||||
<th>Đánh giá</th>
|
||||
<th>Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<KpiRow v-for="kpi in kpis" :key="kpi.empname" :row="kpi" />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="mb-4">Mẫu KPI theo vị trí</p>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="fsb-18">Nhân viên kinh doanh</p>
|
||||
<ul>
|
||||
<li>Doanh số bán hàng: 200M/tháng</li>
|
||||
<li>Số khách hàng mới: 20 khách/tháng</li>
|
||||
<li>Tỷ lệ chốt đơn: 75%</li>
|
||||
<li>Tỷ lệ khách hàng quay lại: 60%</li>
|
||||
</ul>
|
||||
<button class="button">Sử dụng mẫu</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="fsb-16">Quản lý showroom</p>
|
||||
<ul>
|
||||
<li>Doanh số showroom: 800M/tháng</li>
|
||||
<li>Tăng trưởng doanh số: 10%</li>
|
||||
<li>Quản lý tồn kho: <15%</li>
|
||||
<li>Đánh giá khách hàng: 4.5/5 sao</li>
|
||||
</ul>
|
||||
<button class="button">Sử dụng mẫu</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
th:nth-child(4),
|
||||
th:nth-child(5),
|
||||
th:nth-child(7),
|
||||
th:nth-child(8) {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user