Maison > Article > développement back-end > Comment utiliser PHP et Vue pour concevoir un affichage graphique statistique du système de présence des employés

Comment utiliser PHP et Vue pour concevoir un affichage graphique statistique du système de présence des employés

WBOYoriginal: 2023-09-24 09:39:201388parcourir

Ces dernières années, avec le développement continu de la technologie, les entreprises ont des exigences de plus en plus élevées en matière de gestion de la présence des employés. Afin de mieux compter et afficher les données de présence des employés, il est très important de concevoir un système de présence des employés et de réaliser un affichage visuel des données.

Cet article expliquera comment utiliser PHP et Vue pour concevoir un système de présence des employés et afficher des graphiques statistiques.

1. Conception du système

Tout d'abord, nous devons concevoir une base de données pour stocker les données de présence des employés. Les données de présence comprennent le nom de l'employé, la date de présence, le temps de travail, les heures d'arrêt et d'autres informations. Vous pouvez utiliser MySQL ou d'autres bases de données relationnelles pour créer la base de données et concevoir la structure de table correspondante.

2. Développement back-end

Utilisez PHP pour implémenter la logique back-end du système. Nous devons créer des fichiers PHP pour gérer les requêtes du front-end et interagir avec la base de données.

Tout d'abord, créez un fichier d'interface pour gérer les requêtes frontales, tel que api.php. Dans ce fichier, vous pouvez définir certaines fonctions d'interface pour gérer les opérations d'ajout, de suppression, de modification et d'interrogation des données de présence des employés. api.php。在该文件中，可以定义一些接口函数来处理员工考勤数据的增删改查操作。

<?php

// 连接数据库
$conn = new mysqli('localhost', 'username', 'password', 'database');
// 设定字符集
$conn->set_charset('utf8');

// 增加员工考勤数据
function addAttendance($name, $date, $start, $end) {
    global $conn;
    // 执行插入操作
    $sql = "INSERT INTO attendance (name, date, start, end) VALUES ('$name', '$date', '$start', '$end')";
    $conn->query($sql);
    // 返回结果
    return ['status' => 'success'];
}

// 获取员工考勤数据
function getAttendance($name, $date) {
    global $conn;
    // 执行查询操作
    $sql = "SELECT * FROM attendance WHERE name = '$name' AND date = '$date'";
    $result = $conn->query($sql);
    // 返回结果
    return ['status' => 'success', 'data' => $result->fetch_assoc()];
}

// ...其他接口函数，比如更新和删除员工考勤数据的函数

?>

接下来，我们需要创建一个用于与前端页面交互的文件，比如index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工考勤系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue/dist/vue.css">
</head>
<body>
    <div id="app">
        <!-- 前端页面内容 -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 前端页面逻辑
        });
    </script>
</body>
</html>

Ensuite, nous devons créer un fichier pour interagir avec la page front-end, tel que index.php. Dans ce fichier, nous pouvons utiliser Vue pour gérer l'affichage de la page frontale et l'interaction de l'utilisateur.

Tout d'abord, introduisez les fichiers liés à Vue et créez une instance Vue.

new Vue({
    el: '#app',
    data: {
        name: '',
        date: '',
        start: '',
        end: '',
        attendance: null
    },
    methods: {
        addAttendance: function() {
            // 调用后端接口来增加员工考勤数据
            // 可以使用axios等库发送POST请求到api.php
        },
        getAttendance: function() {
            // 调用后端接口来获取员工考勤数据
            // 可以使用axios等库发送GET请求到api.php
        }
        // ...其他方法
    }
});

Ensuite, dans l'instance Vue, définissez certaines méthodes pour gérer le comportement interactif de l'utilisateur et interagissez avec le backend via les fonctions d'interface définies précédemment.

<div id="app">
    <h2>员工考勤系统</h2>
    <input type="text" v-model="name" placeholder="请输入员工姓名">
    <input type="text" v-model="date" placeholder="请输入考勤日期">
    <input type="text" v-model="start" placeholder="请输入上班时间">
    <input type="text" v-model="end" placeholder="请输入下班时间">
    <button @click="addAttendance">提交</button>
    <button @click="getAttendance">查询</button>
    <div v-if="attendance">
        <h3>员工考勤详情</h3>
        <p>姓名：{{ attendance.name }}</p>
        <p>日期：{{ attendance.date }}</p>
        <p>上班时间：{{ attendance.start }}</p>
        <p>下班时间：{{ attendance.end }}</p>
    </div>
    <!-- 使用ECharts展示图表 -->
    <div id="chart" style="width: 600px;height:400px;"></div>
</div>

<!-- 引入ECharts脚本 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            date: '',
            start: '',
            end: '',
            attendance: null
        },
        methods: {
            addAttendance: function() {
                // 调用后端接口来增加员工考勤数据
                // 可以使用axios等库发送POST请求到api.php
            },
            getAttendance: function() {
                // 调用后端接口来获取员工考勤数据
                // 可以使用axios等库发送GET请求到api.php
            }
            // ...其他方法
        },
        mounted: function() {
            // 页面加载时获取员工考勤数据，并绘制图表
            // 在getAttendance函数中获取数据后，调用绘制图表的方法
        }
    });
</script>

3. Développement front-end

Utilisez Vue pour concevoir la page front-end et utilisez certaines bibliothèques de graphiques pour afficher les statistiques de présence des employés. Dans l'instance Vue, les données sont obtenues via la fonction d'interface définie précédemment et restituées dans la page.

Introduisez une bibliothèque de graphiques, telle que ECharts, dans la page frontale et utilisez cette bibliothèque pour dessiner des graphiques. Différents graphiques peuvent être conçus en fonction de besoins spécifiques, tels que des graphiques à barres, des graphiques linéaires, etc.

rrreee

Grâce à la mise en œuvre des étapes ci-dessus, nous pouvons concevoir un système de présence des employés implémenté à l'aide de PHP et Vue, et afficher les statistiques de présence des employés sous forme de graphiques. Bien entendu, la mise en œuvre spécifique doit encore être ajustée et améliorée en fonction des besoins spécifiques. 🎜

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!

php mysql echarts 接口数据库

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser PHP et Vue pour développer des fonctions de gestion logistique pour la gestion d'entrepôtArticle suivant：Comment utiliser PHP et Vue pour développer des fonctions de gestion logistique pour la gestion d'entrepôt

Articles Liés

Voir plus