301 lines
12 KiB
PHP
301 lines
12 KiB
PHP
<div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm d-flex justify-content-end">
|
|
<button class="btn btn-primary mr-2 mb-2" wire:click="showPercentageEquipments">
|
|
<i class="fa-solid fa-percent"></i>
|
|
</button>
|
|
<button class="btn btn-primary mr-2 mb-2" wire:click="updateTimeGrafics">
|
|
<i class="fa-solid fa-chart-pie"></i>
|
|
</button>
|
|
<button class="btn btn-primary mb-2" wire:click="updateTimeGrafics">
|
|
<i class="fa-solid fa-arrows-rotate"></i>
|
|
</button>
|
|
<div style="font-size: 15px; color:#09255C; margin-left:4px; display: flex; align-items: center; justify-content: center; height: 50px;">
|
|
{{ $lastUpdated }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row text-center">
|
|
<div class="col-sm">
|
|
<h6>Equipamentos da Obra</h6>
|
|
<p style="color:gray; font-size:13px">Total de ações para concluir todos os equipamentos da obra.</p>
|
|
<canvas id="myPieChart"></canvas>
|
|
</div>
|
|
<div class="col-sm">
|
|
<h6>Equivalente de equipamentos da Obra</h6>
|
|
<p style="color:gray; font-size:13px">Total de equipamentos e os seus estados actuais.</p>
|
|
<canvas id="myPieChart1"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// O code em si e refeito pois o code inicial busca valores do componente livewire apos atualizar ele vem como data, posteriormente atualizar esta parte para nao repetir code.
|
|
window.addEventListener('refreshData', event => {
|
|
// Obter dados do evento
|
|
var data = event.detail[0];
|
|
|
|
if (myPieChart) {
|
|
myPieChart.destroy(); // Destrua o gráfico antigo antes de criar um novo
|
|
}
|
|
|
|
var equipmentGraph = document.getElementById('myPieChart').getContext('2d');
|
|
|
|
var myPieChart = new Chart(equipmentGraph, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [
|
|
'Total: ' + data.totalEquipmentsCount,
|
|
'Por Iniciar: ' + data.unstarted,
|
|
'Em Curso: ' + data.inProgress,
|
|
'Concluídos: ' + data.completed
|
|
],
|
|
datasets: [{
|
|
data: [null, data.unstarted, data.inProgress, data.completed],
|
|
backgroundColor: [
|
|
'rgba(0,80,0,0.5)', //green color
|
|
'rgb(9, 37, 92)', //Azul escuro ISPT
|
|
'rgb(0, 176, 234)', // Azull Claro ISPT
|
|
'rgb(5, 107, 163)', // Azul parecido
|
|
],
|
|
// borderColor: [
|
|
// '#FFFFFF', // Cor branca para o total (não será visível)
|
|
// 'rgba(255, 99, 132, 1)',
|
|
// 'rgba(54, 162, 235, 1)',
|
|
// 'rgba(255, 206, 86, 1)'
|
|
// ],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
events: [],
|
|
// responsive: true,
|
|
// maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
|
|
}
|
|
});
|
|
|
|
if (myPieChart1) {
|
|
myPieChart1.destroy(); // Destrua o gráfico antigo antes de criar um novo
|
|
}
|
|
|
|
var grafico2 = document.getElementById('myPieChart1').getContext('2d');
|
|
|
|
var myPieChart1 = new Chart(grafico2, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [
|
|
'Total: ' + data.totalEquivalentEquipment,
|
|
'Por Iniciar: ' + data.equivalentUnstarted,
|
|
'Em Curso: ' + data.equivalentInProgress,
|
|
'Concluídos: ' + data.equivalentCompleted
|
|
],
|
|
datasets: [{
|
|
data: [null, data.equivalentUnstarted, data.equivalentInProgress, data
|
|
.equivalentCompleted
|
|
],
|
|
backgroundColor: [
|
|
'rgba(0,80,0,0.5)', //green color
|
|
'rgb(9, 37, 92)', //Azul escuro ISPT
|
|
'rgb(0, 176, 234)', // Azull Claro ISPT
|
|
'rgb(5, 107, 163)', // Azul parecido
|
|
],
|
|
// borderColor: [
|
|
// 'rgba(0,80,0,0.5)',
|
|
// 'rgba(255, 99, 132, 1)',
|
|
// 'rgba(54, 162, 235, 1)',
|
|
// 'rgba(255, 206, 86, 1)'
|
|
// ],
|
|
borderWidth: 1.
|
|
}]
|
|
},
|
|
options: {
|
|
events: [],
|
|
// responsive: true,
|
|
// maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
|
|
}
|
|
});
|
|
});
|
|
|
|
// Obtenha o contexto do elemento canvas
|
|
var equipmentGraph = document.getElementById('myPieChart').getContext('2d');
|
|
|
|
// Dados do componente Livewire
|
|
var totalEquipmentsCount = {{ $totalEquipmentsCount }};
|
|
var unstarted = {{ $unstarted }};
|
|
var inProgress = {{ $inProgress }};
|
|
var completed = {{ $completed }};
|
|
|
|
|
|
// Crie um novo gráfico circular
|
|
var myPieChart = new Chart(equipmentGraph, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [
|
|
'Total: ' + totalEquipmentsCount,
|
|
'Por Iniciar: ' + unstarted,
|
|
'Em Curso: ' + inProgress,
|
|
'Concluídos: ' + completed
|
|
],
|
|
datasets: [{
|
|
data: [null, unstarted, inProgress, completed],
|
|
backgroundColor: [
|
|
'rgba(0,80,0,0.5)', //green color
|
|
'rgb(9, 37, 92)', //Azul escuro ISPT
|
|
'rgb(0, 176, 234)', // Azull Claro ISPT
|
|
'rgb(5, 107, 163)', // Azul parecido
|
|
],
|
|
// borderColor: [
|
|
// '#FFFFFF', // Cor branca para o total (não será visível)
|
|
// 'rgba(255, 99, 132, 1)',
|
|
// 'rgba(54, 162, 235, 1)',
|
|
// 'rgba(255, 206, 86, 1)'
|
|
// ],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
events: [],
|
|
// responsive: true,
|
|
// maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
|
|
}
|
|
});
|
|
|
|
var grafico2 = document.getElementById('myPieChart1').getContext('2d');
|
|
|
|
// Dados do componente Livewire
|
|
var totalEquivalentEquipment = {{ $totalEquivalentEquipment }}
|
|
var equivalentUnstarted = {{ $equivalentUnstarted }}
|
|
var equivalentInProgress = {{ $equivalentInProgress }}
|
|
var equivalentCompleted = {{ $equivalentCompleted }}
|
|
|
|
var myPieChart1 = new Chart(grafico2, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: [
|
|
'Total: ' + totalEquivalentEquipment,
|
|
'Por Iniciar: ' + equivalentUnstarted,
|
|
'Em Curso: ' + equivalentInProgress,
|
|
'Concluídos: ' + equivalentCompleted
|
|
],
|
|
datasets: [{
|
|
data: [null, equivalentUnstarted, equivalentInProgress,
|
|
equivalentCompleted
|
|
], // Dados do componente Livewire
|
|
backgroundColor: [
|
|
'rgba(0,80,0,0.5)', //green color
|
|
'rgb(9, 37, 92)', //Azul escuro ISPT
|
|
'rgb(0, 176, 234)', // Azull Claro ISPT
|
|
'rgb(5, 107, 163)', // Azul parecido
|
|
],
|
|
// borderColor: [
|
|
// 'rgba(0,80,0,0.5)',
|
|
// 'rgba(255, 99, 132, 1)',
|
|
// 'rgba(54, 162, 235, 1)',
|
|
// 'rgba(255, 206, 86, 1)'
|
|
// ],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
events: []
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
window.addEventListener('refreshPercentageEquipments', event => {
|
|
// Obter dados do evento
|
|
var data = event.detail[0];
|
|
|
|
// Calcular porcentagens
|
|
var unstartedPercentage = ((data.unstarted / data.totalEquipmentsCount) * 100).toFixed(2);
|
|
var inProgressPercentage = ((data.inProgress / data.totalEquipmentsCount) * 100).toFixed(2);
|
|
var completedPercentage = ((data.completed / data.totalEquipmentsCount) * 100).toFixed(2);
|
|
|
|
|
|
var totalEquivalentEquipmentPercentage = ((data.equivalentUnstarted / data.totalEquivalentEquipment) *
|
|
100).toFixed(
|
|
2);
|
|
var equivalentInProgressPercentage = ((data.equivalentInProgress / data.totalEquivalentEquipment) * 100)
|
|
.toFixed(2);
|
|
var equivalentCompletedPercentage = ((data.equivalentCompleted / data.totalEquivalentEquipment) * 100)
|
|
.toFixed(2);
|
|
|
|
|
|
if (myPieChart) {
|
|
myPieChart.destroy(); // Destrua o gráfico antigo antes de criar um novo
|
|
}
|
|
|
|
var equipmentGraph = document.getElementById('myPieChart').getContext('2d');
|
|
|
|
var myPieChart = new Chart(equipmentGraph, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: [
|
|
'Total: ' + data.totalEquipmentsCount,
|
|
'Por Iniciar: ' + unstartedPercentage + '%',
|
|
'Em Curso: ' + inProgressPercentage + '%',
|
|
'Concluídos: ' + completedPercentage + '%'
|
|
],
|
|
datasets: [{
|
|
data: [null, data.unstarted, data.inProgress, data.completed],
|
|
backgroundColor: [
|
|
'rgba(0,80,0,0.5)', //green color
|
|
'rgb(9, 37, 92)', //Azul escuro ISPT
|
|
'rgb(0, 176, 234)', // Azull Claro ISPT
|
|
'rgb(5, 107, 163)', // Azul parecido
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
events: [],
|
|
}
|
|
});
|
|
if (myPieChart1) {
|
|
myPieChart1.destroy(); // Destrua o gráfico antigo antes de criar um novo
|
|
}
|
|
|
|
var grafico2 = document.getElementById('myPieChart1').getContext('2d');
|
|
|
|
var myPieChart1 = new Chart(grafico2, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: [
|
|
'Total: ' + data.totalEquivalentEquipment,
|
|
'Por Iniciar: ' + totalEquivalentEquipmentPercentage + '%',
|
|
'Em Curso: ' + equivalentInProgressPercentage + '%',
|
|
'Concluídos: ' + equivalentCompletedPercentage + '%'
|
|
],
|
|
datasets: [{
|
|
data: [null, data.equivalentUnstarted, data.equivalentInProgress, data
|
|
.equivalentCompleted
|
|
],
|
|
backgroundColor: [
|
|
'rgba(0,80,0,0.5)', //green color
|
|
'rgb(9, 37, 92)', //Azul escuro ISPT
|
|
'rgb(0, 176, 234)', // Azull Claro ISPT
|
|
'rgb(5, 107, 163)', // Azul parecido
|
|
],
|
|
// borderColor: [
|
|
// 'rgba(0,80,0,0.5)',
|
|
// 'rgba(255, 99, 132, 1)',
|
|
// 'rgba(54, 162, 235, 1)',
|
|
// 'rgba(255, 206, 86, 1)'
|
|
// ],
|
|
borderWidth: 1.
|
|
}]
|
|
},
|
|
options: {
|
|
events: [],
|
|
// responsive: true,
|
|
// maintainAspectRatio: false // Isso permite que você defina o tamanho do gráfico via CSS
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|