Cara menggunakan PHP dan Vue untuk membina modul analisis statistik untuk kehadiran pekerja

Cara menggunakan PHP dan Vue untuk membina modul analisis statistik untuk kehadiran pekerja

Pengurusan kehadiran adalah bahagian yang sangat penting bagi perusahaan Ia boleh membantu perusahaan memahami status kerja dan status kehadiran pekerja dalam masa nyata. Dalam pengurusan perusahaan moden, adalah amalan biasa untuk menggunakan analisis data untuk menilai kehadiran pekerja. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membina modul analisis statistik yang mudah dan praktikal untuk kehadiran pekerja bagi membantu syarikat mengurus kehadiran pekerja dengan lebih cekap.

Pertama, kita perlu menyediakan persekitaran pembangunan, termasuk pemasangan PHP dan Vue. Pastikan kami telah memasang sambungan dan alatan yang berkaitan dengan PHP dan PHP serta memasang alat perancah Node.js dan Vue Vue CLI.

Seterusnya, kami mula membina modul analisis statistik untuk kehadiran pekerja. Pertama, kita perlu mencipta jadual pangkalan data MySQL untuk menyimpan rekod kehadiran pekerja. Struktur jadual adalah seperti berikut:

CREATE TABLE attendance (
    id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    employee_id INT(11) NOT NULL,
    attendance_date DATE NOT NULL,
    attendance_status ENUM('Present', 'Late', 'Absent') NOT NULL
);

Dalam PHP, kita boleh menggunakan PDO untuk menyambung ke pangkalan data dan melakukan operasi data. Berikut ialah contoh kod PHP mudah untuk menyoal statistik kehadiran pekerja untuk bulan tertentu.

<?php
// 数据库连接信息
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "attendance";

// 建立数据库连接
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);

// 查询某个月份的考勤统计
$month = $_GET['month'];
$sql = "SELECT employee_id, COUNT(*) AS total_attendance, 
        SUM(CASE WHEN attendance_status = 'Present' THEN 1 ELSE 0 END) AS total_present, 
        SUM(CASE WHEN attendance_status = 'Late' THEN 1 ELSE 0 END) AS total_late,
        SUM(CASE WHEN attendance_status = 'Absent' THEN 1 ELSE 0 END) AS total_absent
        FROM attendance WHERE DATE_FORMAT(attendance_date, '%Y-%m') = :month GROUP BY employee_id";

$stmt = $conn->prepare($sql);
$stmt->bindParam(':month', $month);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 将结果转换为JSON格式返回给前端
echo json_encode($results);
?>

Seterusnya, kita perlu mencipta komponen Vue untuk memaparkan statistik kehadiran pekerja. Berikut ialah contoh komponen Vue mudah untuk memaparkan statistik kehadiran pekerja untuk bulan tertentu:

<template>
  <div>
    <h2>{{ month }} 考勤统计</h2>
    <table>
      <thead>
        <tr>
          <th>员工ID</th>
          <th>总出勤天数</th>
          <th>正常出勤天数</th>
          <th>迟到天数</th>
          <th>旷工天数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in attendanceRecords" :key="record.employee_id">
          <td>{{ record.employee_id }}</td>
          <td>{{ record.total_attendance }}</td>
          <td>{{ record.total_present }}</td>
          <td>{{ record.total_late }}</td>
          <td>{{ record.total_absent }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: '2021-01',
      attendanceRecords: []
    };
  },
  mounted() {
    this.fetchAttendanceData(this.month);
  },
  methods: {
    fetchAttendanceData(month) {
      fetch(`/api/attendance.php?month=${month}`)
        .then(response => response.json())
        .then(data => {
          this.attendanceRecords = data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

Dalam contoh kod di atas, kami menggunakan fungsi cangkuk kitaran hayat Vue dipasang untuk memuatkan komponen apabila ia dimuatkan . Panggil kaedah fetchAttendanceData untuk mendapatkan data kehadiran. Dalam kaedah fetchAttendanceData, kami menggunakan API Ambil untuk menghantar permintaan GET ke antara muka bahagian belakang PHP untuk mendapatkan data dan menyerahkan data yang diperoleh kepada attendanceRecords untuk paparan halaman . mounted来在组件加载时调用fetchAttendanceData方法来获取考勤数据。在fetchAttendanceData方法中，我们使用了Fetch API发送一个GET请求到PHP的后端接口来获取数据，并将获取到的数据赋值给attendanceRecords以供页面渲染。

我们在上述代码中使用了一个名为attendance.php

Dalam kod di atas, kami menggunakan fail PHP bernama attendance.php sebagai antara muka bahagian belakang, yang bertanggungjawab untuk menanyakan pangkalan data dan mengembalikan data. Dalam projek sebenar, kami boleh menggunakan penghala (seperti Laravel atau Symfony) untuk membina API bahagian belakang yang lebih lengkap.

Akhir sekali, kami hanya perlu menambah komponen Vue ini pada halaman:

<template>
  <div>
    <h1>员工考勤统计</h1>
    <attendance-statistics></attendance-statistics>
  </div>
</template>

<script>
import AttendanceStatistics from './components/AttendanceStatistics.vue';

export default {
  components: {
    AttendanceStatistics
  }
}
</script>

Melalui langkah di atas, kami berjaya membina modul analisis statistik yang mudah dan praktikal untuk kehadiran pekerja. Dalam penggunaan sebenar, kami boleh mengembangkan dan mengoptimumkan modul ini mengikut keperluan, seperti menambah syarat penapisan, mengeksport laporan dan fungsi lain.

Ringkasnya, menggunakan PHP dan Vue untuk membina modul analisis statistik untuk kehadiran pekerja boleh membantu syarikat mengurus kehadiran pekerja dengan lebih baik. Melalui gabungan PHP dan MySQL dan fleksibiliti Vue, kami boleh membuat pertanyaan, memaparkan dan menganalisis data dengan mudah, dengan itu menyediakan asas dan rujukan untuk keputusan pengurusan perusahaan. 🎜

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membina modul analisis statistik untuk kehadiran pekerja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!