2024-10-16 18:19:14 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Pilotage Budgétaire</title>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
2024-10-18 19:07:09 +02:00
|
|
|
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
|
2024-10-16 18:19:14 +02:00
|
|
|
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
|
|
|
|
|
<style>
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.section {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-width: 300px;
|
|
|
|
|
margin: 20px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section h2 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #333;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
canvas {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: 300px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table th, table td {
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table th {
|
|
|
|
|
background-color: #f2f2f2;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.filters {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.filters select {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.filters input {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-container {
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button-container button {
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div class="logo-container">
|
|
|
|
|
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="categories">
|
|
|
|
|
<a href="./chef_departement.html">Accueil</a>
|
|
|
|
|
|
|
|
|
|
<div class="dropdown">
|
|
|
|
|
<a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
|
|
|
|
|
<div class="dropdown-content">
|
|
|
|
|
<a href="./gestion-heures-professeur.html">Professeur</a>
|
|
|
|
|
<a href="./gestion-heures-formation.html">Formation</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<a href="./paiements.html">Pilotage budgétaire</a>
|
|
|
|
|
<a href="./mes-informations.html">Mes informations et documents</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="user-section">
|
|
|
|
|
<div class="user-name">
|
|
|
|
|
Florent MADELAINE
|
|
|
|
|
</div>
|
|
|
|
|
<div class="logout-container">
|
|
|
|
|
<a href="../../index.html" title="Se déconnecter">
|
|
|
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<!-- Résumé des finances globales -->
|
|
|
|
|
<div class="section">
|
|
|
|
|
<h2>Résumé des Finances</h2>
|
|
|
|
|
<canvas id="budgetOverview"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Répartition des heures -->
|
|
|
|
|
<div class="section">
|
|
|
|
|
<h2>Répartition des Heures</h2>
|
|
|
|
|
<canvas id="hoursDistribution"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bilan des formations -->
|
|
|
|
|
<div class="section">
|
|
|
|
|
<h2>Bilan des dépenses mensuels</h2>
|
|
|
|
|
<canvas id="formationBalance"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bilan comptable détaillé -->
|
|
|
|
|
<div class="section">
|
|
|
|
|
<h2>Bilan Comptable</h2>
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Formation</th>
|
|
|
|
|
<th>Budget Alloué</th>
|
|
|
|
|
<th>Budget Utilisé</th>
|
|
|
|
|
<th>Bénéfices</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>BUT Informatique</td>
|
|
|
|
|
<td>500 000 €</td>
|
|
|
|
|
<td>420 000 €</td>
|
|
|
|
|
<td>80 000 €</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>BUT Génie Mécanique</td>
|
|
|
|
|
<td>600 000 €</td>
|
|
|
|
|
<td>580 000 €</td>
|
|
|
|
|
<td>20 000 €</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>Licence Mathématiques</td>
|
|
|
|
|
<td>300 000 €</td>
|
|
|
|
|
<td>250 000 €</td>
|
|
|
|
|
<td>50 000 €</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Button Container -->
|
|
|
|
|
<div class="button-container">
|
|
|
|
|
<button id="downloadCharts">Télécharger les Graphiques</button>
|
|
|
|
|
<button id="downloadCSV">Télécharger en CSV</button>
|
|
|
|
|
<button id="importCSV">Importer des données CSV</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Script Chart.js pour les graphiques -->
|
|
|
|
|
<script>
|
|
|
|
|
// Résumé des finances globales
|
|
|
|
|
const ctx1 = document.getElementById('budgetOverview').getContext('2d');
|
|
|
|
|
const budgetOverview = new Chart(ctx1, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['Informatique', 'Génie Mécanique', 'Mathématiques', 'Chimie'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: 'Budget Alloué (€)',
|
|
|
|
|
data: [500000, 600000, 300000, 450000],
|
|
|
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
|
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}, {
|
|
|
|
|
label: 'Budget Utilisé (€)',
|
|
|
|
|
data: [420000, 580000, 250000, 430000],
|
|
|
|
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
|
|
|
|
borderColor: 'rgba(255, 99, 132, 1)',
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Répartition des heures
|
|
|
|
|
const ctx2 = document.getElementById('hoursDistribution').getContext('2d');
|
|
|
|
|
const hoursDistribution = new Chart(ctx2, {
|
|
|
|
|
type: 'pie',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['Permanents', 'Heures Complémentaires', 'Vacataires'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: 'Heures de travail',
|
|
|
|
|
data: [60, 25, 15],
|
|
|
|
|
backgroundColor: [
|
|
|
|
|
'rgba(54, 162, 235, 0.2)',
|
|
|
|
|
'rgba(255, 206, 86, 0.2)',
|
|
|
|
|
'rgba(75, 192, 192, 0.2)'
|
|
|
|
|
],
|
|
|
|
|
borderColor: [
|
|
|
|
|
'rgba(54, 162, 235, 1)',
|
|
|
|
|
'rgba(255, 206, 86, 1)',
|
|
|
|
|
'rgba(75, 192, 192, 1)'
|
|
|
|
|
],
|
|
|
|
|
borderWidth: 1
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Bilan des formations
|
|
|
|
|
const ctx3 = document.getElementById('formationBalance').getContext('2d');
|
|
|
|
|
const formationBalance = new Chart(ctx3, {
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: 'BUT Informatique',
|
|
|
|
|
data: [70000, 90000, 80000, 85000, 90000, 95000],
|
|
|
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
|
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
|
|
|
fill: true
|
|
|
|
|
}, {
|
|
|
|
|
label: 'BUT Génie Mécanique',
|
|
|
|
|
data: [80000, 82000, 81000, 78000, 84000, 86000],
|
|
|
|
|
borderColor: 'rgba(153, 102, 255, 1)',
|
|
|
|
|
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
|
|
|
|
fill: true
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Function to download charts as images
|
|
|
|
|
document.getElementById('downloadCharts').addEventListener('click', function () {
|
|
|
|
|
const chartIds = ['budgetOverview', 'hoursDistribution', 'formationBalance'];
|
|
|
|
|
chartIds.forEach(id => {
|
|
|
|
|
const chart = document.getElementById(id);
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.href = chart.toDataURL('image/png');
|
|
|
|
|
link.download = `${id}.png`;
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
link.click();
|
|
|
|
|
document.body.removeChild(link);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Function to download table data as CSV
|
|
|
|
|
document.getElementById('downloadCSV').addEventListener('click', function () {
|
|
|
|
|
const table = document.querySelector('table');
|
|
|
|
|
const rows = Array.from(table.rows);
|
|
|
|
|
const csvContent = rows.map(row => Array.from(row.cells).map(cell => cell.textContent).join(",")).join("\n");
|
|
|
|
|
|
|
|
|
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
|
|
|
const link = document.createElement('a');
|
|
|
|
|
link.href = URL.createObjectURL(blob);
|
|
|
|
|
link.download = 'bilan_comptable.csv';
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
link.click();
|
|
|
|
|
document.body.removeChild(link);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
