Comment utiliser PHP et Vue pour créer un module d'analyse statistique de la présence des employés

Comment utiliser PHP et Vue pour créer un module d'analyse statistique pour la présence des employés

La gestion des présences est un élément très important pour les entreprises. Elle peut aider les entreprises à comprendre l'état de travail et l'état de présence des employés en temps réel. Dans la gestion d’entreprise moderne, il est courant d’utiliser l’analyse des données pour évaluer la présence des employés. Cet article expliquera comment utiliser PHP et Vue pour créer un module d'analyse statistique simple et pratique pour la présence des employés afin d'aider les entreprises à gérer plus efficacement la présence des employés.

Tout d'abord, nous devons préparer l'environnement de développement, y compris l'installation de PHP et Vue. Assurez-vous que nous avons installé PHP et les extensions et outils liés à PHP, ainsi que Node.js et l'outil d'échafaudage de Vue, Vue CLI.

Ensuite, nous avons commencé à construire le module d'analyse statistique de la présence des employés. Tout d’abord, nous devons créer une table de base de données MySQL pour stocker les enregistrements de présence des employés. La structure de la table est la suivante :

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

En PHP, nous pouvons utiliser PDO pour nous connecter à la base de données et effectuer des opérations sur les données. Ce qui suit est un exemple de code PHP simple pour interroger les statistiques de présence des employés pour un mois donné.

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

Ensuite, nous devons créer un composant Vue pour afficher les statistiques de présence des employés. Ce qui suit est un exemple simple de composant Vue pour afficher les statistiques de présence des employés pour un certain mois :

<template>
  <div>
    <h2 id="month-考勤统计">{{ 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>

Dans l'exemple de code ci-dessus, nous utilisons la fonction hook de cycle de vie de Vue montée pour charger le composant lorsqu'il est chargé. . Appelez la méthode fetchAttendanceData pour obtenir les données de présence. Dans la méthode fetchAttendanceData, nous utilisons l'API Fetch pour envoyer une requête GET à l'interface backend de PHP pour obtenir des données, et assignons les données obtenues à attendanceRecords pour le rendu de la page. . mounted来在组件加载时调用fetchAttendanceData方法来获取考勤数据。在fetchAttendanceData方法中，我们使用了Fetch API发送一个GET请求到PHP的后端接口来获取数据，并将获取到的数据赋值给attendanceRecords以供页面渲染。

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

Dans le code ci-dessus, nous utilisons un fichier PHP nommé attendance.php comme interface back-end, qui est responsable de l'interrogation de la base de données et du renvoi des données. Dans des projets réels, nous pouvons utiliser des routeurs (tels que Laravel ou Symfony) pour créer une API backend plus complète.

Enfin, il suffit d'ajouter ce composant Vue à la page :

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

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

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

Grâce aux étapes ci-dessus, nous avons réussi à construire un module d'analyse statistique simple et pratique pour la présence des employés. En utilisation réelle, nous pouvons étendre et optimiser ce module en fonction des besoins, comme l'ajout de conditions de filtrage, l'exportation de rapports et d'autres fonctions.

En résumé, utiliser PHP et Vue pour créer un module d'analyse statistique de la présence des employés peut aider les entreprises à mieux gérer la présence des employés. Grâce à la combinaison de PHP et MySQL et à la flexibilité de Vue, nous pouvons facilement interroger, afficher et analyser les données, fournissant ainsi une base et une référence pour les décisions de gestion d'entreprise. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!