How to use PHP and Vue to build a statistical analysis module for employee attendance

How to use PHP and Vue to build a statistical analysis module for employee attendance

Attendance management is a very important part for enterprises, it can help enterprises understand employees in real time work status and attendance status. In modern enterprise management, it is a common practice to use data analysis to evaluate employee attendance. This article will introduce how to use PHP and Vue to build a simple and practical statistical analysis module for employee attendance to help companies manage employee attendance more efficiently.

First, we need to prepare the development environment, including the installation of PHP and Vue. Make sure we have installed PHP and PHP-related extensions and tools, and installed Node.js and Vue's scaffolding tool Vue CLI.

Next, we started to build the statistical analysis module for employee attendance. First, we need to create a MySQL database table to store employee attendance records. The structure of the table is as follows:

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
);

In PHP, we can use PDO to connect to the database and perform data operations. The following is a simple PHP code example for querying employee attendance statistics for a certain month.

<?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);
?>

Next, we need to create a Vue component to display employee attendance statistics. The following is a simple Vue component example to display employee attendance statistics for a certain month:

<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>

In the above code example, we use Vue’s life cycle hook function mounted to When the component is loaded, call the fetchAttendanceData method to obtain attendance data. In the fetchAttendanceData method, we use the Fetch API to send a GET request to the PHP backend interface to obtain data, and assign the obtained data to attendanceRecords for page rendering.

We used a PHP file named attendance.php in the above code as the back-end interface, which is responsible for querying the database and returning data. In real projects, we can use routers (such as Laravel or Symfony) to build a more complete backend API.

Finally, we only need to add this Vue component to the page:

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

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

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

Through the above steps, we successfully built a simple and practical statistical analysis module for employee attendance. In actual use, we can expand and optimize this module according to needs, such as adding filtering conditions, exporting reports and other functions.

In summary, using PHP and Vue to build a statistical analysis module for employee attendance can help companies better manage employee attendance. Through the combination of PHP and MySQL and the flexibility of Vue, we can easily query, display and analyze data, thereby providing a basis and reference for enterprise management decisions.

The above is the detailed content of How to use PHP and Vue to build a statistical analysis module for employee attendance. For more information, please follow other related articles on the PHP Chinese website!