hrm/app/components/viewer/Kpi.vue

<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: &lt;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>