422 lines
10 KiB
Vue
422 lines
10 KiB
Vue
<script setup>
|
|
const costChartOptions = {
|
|
chart: {
|
|
type: 'column',
|
|
},
|
|
title: {
|
|
text: null,
|
|
},
|
|
credits: {
|
|
enabled: false,
|
|
},
|
|
xAxis: {
|
|
categories: ['T10', 'T11', 'T12', 'T1', 'T2', 'T3'],
|
|
crosshair: true,
|
|
accessibility: {
|
|
description: 'Tháng',
|
|
},
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
title: {
|
|
text: 'Triệu VNĐ',
|
|
},
|
|
},
|
|
tooltip: {
|
|
valueSuffix: ' (triệu VNĐ)',
|
|
},
|
|
plotOptions: {
|
|
column: {
|
|
pointPadding: 0,
|
|
borderWidth: 0,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Chi phí',
|
|
data: [180, 195, 210, 225, 205, 215],
|
|
showInLegend: false,
|
|
},
|
|
],
|
|
};
|
|
const efficiencyChartOptions = {
|
|
chart: {
|
|
type: 'line',
|
|
},
|
|
title: {
|
|
text: null,
|
|
},
|
|
credits: {
|
|
enabled: false,
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'T10',
|
|
'T11',
|
|
'T12',
|
|
'T1',
|
|
'T2',
|
|
'T3',
|
|
'T4',
|
|
'T5',
|
|
'T6',
|
|
'T7',
|
|
'T8',
|
|
'T9',
|
|
'T10',
|
|
],
|
|
crosshair: true,
|
|
accessibility: {
|
|
description: 'Tháng',
|
|
},
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
title: {
|
|
text: '%',
|
|
},
|
|
},
|
|
tooltip: {
|
|
valueSuffix: '%',
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
label: {
|
|
connectorAllowed: false,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Hiệu suất',
|
|
data: [50, 62, 75, 78, 80, 74, 79, 70, 68, 73, 82, 76, 77],
|
|
showInLegend: false,
|
|
},
|
|
],
|
|
};
|
|
const alloChartOptions = {
|
|
chart: {
|
|
type: 'pie',
|
|
zooming: {
|
|
type: 'xy',
|
|
},
|
|
panning: {
|
|
enabled: true,
|
|
type: 'xy',
|
|
},
|
|
panKey: 'shift',
|
|
},
|
|
credits: {
|
|
enabled: false,
|
|
},
|
|
title: {
|
|
text: null,
|
|
},
|
|
tooltip: {
|
|
valueSuffix: '%',
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
dataLabels: [
|
|
{
|
|
enabled: true,
|
|
distance: 20,
|
|
},
|
|
{
|
|
enabled: true,
|
|
distance: -40,
|
|
format: '{point.percentage:.1f}%',
|
|
style: {
|
|
fontSize: '1.2em',
|
|
textOutline: 'none',
|
|
opacity: 0.7,
|
|
},
|
|
filter: {
|
|
operator: '>',
|
|
property: 'percentage',
|
|
value: 10,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Percentage',
|
|
colorByPoint: true,
|
|
data: [
|
|
{
|
|
name: 'Kinh doanh',
|
|
y: 43.02,
|
|
},
|
|
{
|
|
name: 'Hành chính',
|
|
y: 26.71,
|
|
},
|
|
{
|
|
name: 'Kế toán',
|
|
y: 10.09,
|
|
},
|
|
{
|
|
name: 'HR',
|
|
y: 15.5,
|
|
},
|
|
{
|
|
name: 'Marketing',
|
|
y: 20.68,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
const barChartOptions = {
|
|
chart: {
|
|
type: 'bar',
|
|
},
|
|
title: {
|
|
text: null,
|
|
},
|
|
credits: {
|
|
enabled: false,
|
|
},
|
|
xAxis: {
|
|
categories: ['Hà Nội', 'TP.HCM', 'Đà Nẵng', 'Cần Thơ'],
|
|
title: {
|
|
text: null,
|
|
},
|
|
gridLineWidth: 1,
|
|
lineWidth: 0,
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
title: {
|
|
text: 'Số lượng',
|
|
},
|
|
labels: {
|
|
overflow: 'justify',
|
|
},
|
|
gridLineWidth: 0,
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
dataLabels: {
|
|
enabled: true,
|
|
},
|
|
groupPadding: 0.1,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Số lượng',
|
|
data: [24, 33, 30, 19],
|
|
showInLegend: false,
|
|
},
|
|
],
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="columns is-multiline">
|
|
<div class="column columns is-12">
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<p class="">Tổng nhân viên</p>
|
|
</div>
|
|
<div class="content">
|
|
<p class="title is-4">8</p>
|
|
<p class="subtitle is-6">+2 so với tháng trước</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<p class="">Đang làm việc</p>
|
|
</div>
|
|
<div class="content">
|
|
<p class="title is-4">7</p>
|
|
<p class="subtitle is-6">1 nhân viên nghỉ phép</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<p class="">Chấm công hôm nay</p>
|
|
</div>
|
|
<div class="content">
|
|
<p class="title is-4">7</p>
|
|
<p class="subtitle is-6">2 nhân viên đi muộn</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<p class="">Chi phí nhân sự</p>
|
|
</div>
|
|
<div class="content">
|
|
<p class="title is-4">215M</p>
|
|
<p class="subtitle is-6">+4.8% so với tháng trước</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column columns is-12">
|
|
<div class="column is-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<p class="has-text-danger">Cảnh báo hợp đồng sắp hết hạn</p>
|
|
</div>
|
|
<div class="content is-flex is-flex-direction-column is-gap-1">
|
|
<div
|
|
class="card m-0"
|
|
style="box-shadow: none; background-color: #fff5f5"
|
|
>
|
|
<div
|
|
class="card-content p-3 is-flex is-justify-content-space-between is-align-items-center"
|
|
>
|
|
<div class="is-flex is-flex-direction-column">
|
|
<p class="m-0">Trần Thị Bình</p>
|
|
<p class="m-0 fs-14 has-text-grey">
|
|
Nhân viên - Showroom Hà Nội
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="fs-13 has-text-danger px-2 py-1"
|
|
style="border: 1px solid red; border-radius: 8px"
|
|
>
|
|
2026-04-15
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="card m-0"
|
|
style="box-shadow: none; background-color: #fff5f5"
|
|
>
|
|
<div
|
|
class="card-content p-3 is-flex is-justify-content-space-between is-align-items-center"
|
|
>
|
|
<div class="is-flex is-flex-direction-column">
|
|
<p class="m-0">Trần Thị Bình</p>
|
|
<p class="m-0 fs-14 has-text-grey">
|
|
Nhân viên - Showroom Hà Nội
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="fs-13 has-text-danger px-2 py-1"
|
|
style="border: 1px solid red; border-radius: 8px"
|
|
>
|
|
2026-04-15
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="card m-0"
|
|
style="box-shadow: none; background-color: #fff5f5"
|
|
>
|
|
<div
|
|
class="card-content p-3 is-flex is-justify-content-space-between is-align-items-center"
|
|
>
|
|
<div class="is-flex is-flex-direction-column">
|
|
<p class="m-0">Trần Thị Bình</p>
|
|
<p class="m-0 fs-14 has-text-grey">
|
|
Nhân viên - Showroom Hà Nội
|
|
</p>
|
|
</div>
|
|
<p
|
|
class="fs-13 has-text-danger px-2 py-1"
|
|
style="border: 1px solid red; border-radius: 8px"
|
|
>
|
|
2026-04-15
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="card h-full">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<p style="color: #34d">Tình trạng chấm công hôm nay</p>
|
|
</div>
|
|
<div class="content">
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p class="fs-14">Đúng giờ</p>
|
|
<span class="tag" style="background-color: lightgoldenrodyellow"
|
|
>4 người</span
|
|
>
|
|
</div>
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p class="fs-14">Đi muộn</p>
|
|
<span class="tag" style="background-color: lightblue"
|
|
>2 người</span
|
|
>
|
|
</div>
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p class="fs-14">Về sớm</p>
|
|
<span class="tag" style="background-color: lightgreen"
|
|
>1 người</span
|
|
>
|
|
</div>
|
|
<div class="is-flex is-justify-content-space-between">
|
|
<p class="fs-14">Nghỉ phép</p>
|
|
<span class="tag" style="background-color: lightpink"
|
|
>1 người</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column columns is-12 is-multiline">
|
|
<div class="column is-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="mb-4">Chi phí nhân sự 6 tháng</p>
|
|
<highcharts :options="costChartOptions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="mb-4">Hiệu suất làm việc trung bình</p>
|
|
<highcharts :options="efficiencyChartOptions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="mb-4">Phân bổ nhân sự theo phòng ban</p>
|
|
<highcharts :options="alloChartOptions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<p class="mb-4">Phân bổ nhân sự theo showroom</p>
|
|
<highcharts :options="barChartOptions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|