PHP と Vue を使用して従業員の勤怠に関する統計分析モジュールを構築する方法

PHP と Vue を使用して従業員の勤怠に関する統計分析モジュールを構築する方法

勤怠管理は企業にとって非常に重要な部分であり、企業が従業員の勤怠状況を理解するのに役立ちます。リアルタイムの勤務状況と勤怠状況。現代の企業管理では、データ分析を使用して従業員の勤怠を評価することが一般的です。この記事では、PHP と Vue を使用して、企業が従業員の勤怠をより効率的に管理できるよう、従業員の勤怠に関するシンプルで実用的な統計分析モジュールを構築する方法を紹介します。

まず、PHP や Vue のインストールなどの開発環境を準備する必要があります。 PHP および PHP 関連の拡張機能とツール、および Node.js と Vue のスキャフォールディング ツール Vue CLI がインストールされていることを確認してください。

次に、従業員の勤怠に関する統計分析モジュールの構築を開始しました。まず、従業員の勤怠記録を保存するための MySQL データベース テーブルを作成する必要があります。テーブルの構造は次のとおりです。

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

PHP では、PDO を使用してデータベースに接続し、データ操作を実行できます。以下は、特定の月の従業員の出勤統計をクエリする簡単な PHP コードの例です。

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

次に、従業員の勤怠統計を表示するための Vue コンポーネントを作成する必要があります。以下は、特定の月の従業員の勤怠統計を表示する簡単な Vue コンポーネントの例です:

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

上記のコード例では、Vue のライフサイクル フック関数 mounted を使用して、コンポーネントがロードされたら、fetchAttendanceData メソッドを呼び出して出席データを取得します。 fetchAttendanceData メソッドでは、Fetch API を使用して GET リクエストを PHP バックエンド インターフェイスに送信してデータを取得し、取得したデータをページ レンダリングのために attendanceRecords に割り当てます。

上記のコードでは、attendance.php という名前の PHP ファイルをバックエンド インターフェイスとして使用しました。このインターフェイスは、データベースにクエリを実行してデータを返す役割を果たします。実際のプロジェクトでは、ルーター (Laravel や Symfony など) を使用して、より完全なバックエンド API を構築できます。

最後に、この Vue コンポーネントをページに追加するだけです:

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

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

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

上記の手順を通じて、従業員勤怠に関するシンプルで実用的な統計分析モジュールを構築することに成功しました。実際の運用においては、フィルタ条件の追加やレポートのエクスポートなど、必要に応じて拡張・最適化することができます。

要約すると、PHP と Vue を使用して従業員の勤怠に関する統計分析モジュールを構築すると、企業が従業員の勤怠をより適切に管理できるようになります。 PHP と MySQL の組み合わせと Vue の柔軟性により、データのクエリ、表示、分析を簡単に行うことができ、企業の経営上の意思決定の基礎と参照を提供します。

以上がPHP と Vue を使用して従業員の勤怠に関する統計分析モジュールを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。