279 lines
8.5 KiB
Vue
279 lines
8.5 KiB
Vue
<script setup>
|
|
import { ref, watch, onMounted, computed } from "vue";
|
|
import axios from "axios";
|
|
import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
|
|
import Bars from "@/Components/Dashboard/Charts/Bars.vue";
|
|
import { data } from "autoprefixer";
|
|
|
|
const dateRange = ref({
|
|
start: new Date().toISOString().slice(0, 10),
|
|
end: new Date().toISOString().slice(0, 10),
|
|
});
|
|
|
|
const loading = ref(false);
|
|
const error = ref(null);
|
|
const raw = ref([]);
|
|
|
|
// Toggle para usar datos falsos
|
|
const USE_MOCK = ref(false);
|
|
|
|
// Tipos de apoyo (inventados)
|
|
const supportTypes = [
|
|
"Despensas",
|
|
"Despensas Funerarias",
|
|
"Laboratorio",
|
|
"Rayos X",
|
|
"USG",
|
|
];
|
|
|
|
// Distribución por defecto para mock (suman 1)
|
|
const mockDistribution = [0.35, 0.08, 0.2, 0.22, 0.15];
|
|
|
|
const buildMockCounts = (total) => {
|
|
const counts = supportTypes.map((_, i) =>
|
|
Math.round(total * (mockDistribution[i] || 0))
|
|
);
|
|
// Ajustar diferencia por redondeo
|
|
const diff = total - counts.reduce((s, v) => s + v, 0);
|
|
if (diff !== 0) counts[0] += diff;
|
|
return counts;
|
|
};
|
|
|
|
// helpers para sumar por rango
|
|
const isoDate = (d) => new Date(d + "T00:00:00");
|
|
const totalForRange = (startIso, endIso) => {
|
|
const s = isoDate(startIso);
|
|
const e = isoDate(endIso);
|
|
return raw.value.reduce((acc, r) => {
|
|
const rd = isoDate(r.date);
|
|
if (rd >= s && rd <= e) acc += Number(r.available || 0);
|
|
return acc;
|
|
}, 0);
|
|
};
|
|
|
|
const dayStart = (iso) => iso; // ya vienen en formato YYYY-MM-DD
|
|
const weekStartFrom = (endIso) => {
|
|
const d = new Date(endIso + "T00:00:00");
|
|
d.setDate(d.getDate() - 6); // 7 días inclusive
|
|
return d.toISOString().slice(0, 10);
|
|
};
|
|
const monthRangeFrom = (endIso) => {
|
|
const d = new Date(endIso + "T00:00:00");
|
|
d.setDate(1);
|
|
return d.toISOString().slice(0, 10);
|
|
};
|
|
|
|
// Construye chartData ahora por tipos de apoyo
|
|
const chartData = computed(() => {
|
|
const colors = ["#ef4444", "#3b82f6", "#f59e0b"];
|
|
|
|
if(USE_MOCK.value) {
|
|
const todayCounts = buildMockCounts(20);
|
|
const weekCounts = buildMockCounts(100);
|
|
const monthCounts = buildMockCounts(400);
|
|
return {
|
|
labels: supportTypes,
|
|
datasets: [
|
|
{ label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
|
|
{ label: "Semana", data: weekCounts, backgroundColor: colors[1] },
|
|
{ label: "Mes", data: monthCounts, backgroundColor: colors[2] },
|
|
],
|
|
}
|
|
}
|
|
const end = dateRange.value.end;
|
|
const todayTotal = totalForRange(end, end);
|
|
const weekTotal = totalForRange(end, weekStartFrom(end));
|
|
const monthTotal = totalForRange(end, monthRangeFrom(end));
|
|
|
|
const todayCounts = buildMockCounts(todayTotal || 0);
|
|
const weekCounts = buildMockCounts(weekTotal || 0);
|
|
const monthCounts = buildMockCounts(monthTotal || 0);
|
|
|
|
return {
|
|
labels: supportTypes,
|
|
datasets: [
|
|
{ label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
|
|
{ label: "Semana", data: weekCounts, backgroundColor: colors[1] },
|
|
{ label: "Mes", data: monthCounts, backgroundColor: colors[2] },
|
|
],
|
|
}
|
|
});
|
|
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: { stacked: false },
|
|
y: { beginAtZero: true },
|
|
},
|
|
};
|
|
|
|
const buildEmptyRange = (start, end) => {
|
|
const s = new Date(start);
|
|
const e = new Date(end);
|
|
const list = [];
|
|
for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
|
|
list.push({
|
|
date: new Date(d).toISOString().slice(0, 10),
|
|
available: 0,
|
|
unavailable: 0,
|
|
});
|
|
}
|
|
return list;
|
|
};
|
|
|
|
const mapApiToSeries = (items, start, end) => {
|
|
const base = buildEmptyRange(start, end);
|
|
const byDate = {};
|
|
(items || []).forEach((it) => {
|
|
const key = (it.date || it.fecha || it.day || "").slice(0, 10);
|
|
if (key)
|
|
byDate[key] = {
|
|
date: key,
|
|
available: Number(
|
|
it.available ?? it.disponibles ?? it.available_count ?? 0
|
|
),
|
|
};
|
|
});
|
|
return base.map((b) => byDate[b.date] || b);
|
|
};
|
|
|
|
const loadData = async () => {
|
|
loading.value = true;
|
|
error.value = null;
|
|
try {
|
|
const res = await axios.get("/api/atencion-ciudadana", {
|
|
params: {
|
|
start: dateRange.value.start,
|
|
end: dateRange.value.end,
|
|
},
|
|
headers: { "X-Requested-With": "XMLHttpRequest" },
|
|
});
|
|
const payload = res.data;
|
|
const items = payload?.data ?? payload?.items ?? payload ?? [];
|
|
raw.value = mapApiToSeries(
|
|
Array.isArray(items) ? items : [],
|
|
dateRange.value.start,
|
|
dateRange.value.end
|
|
);
|
|
} catch (e) {
|
|
console.error(e);
|
|
error.value =
|
|
e.response?.data?.message || e.message || "Error al cargar datos";
|
|
raw.value = mapApiToSeries([], dateRange.value.start, dateRange.value.end);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
watch(dateRange, loadData, { deep: true });
|
|
onMounted(loadData);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<header>
|
|
<div class="bg-gray-100 py-2">
|
|
<div class="text-left container mx-auto sm:px-6 lg:px-8">
|
|
<span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background-color: #621132" class="shadow-lg">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center h-28">
|
|
<img
|
|
src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
|
|
alt="Logo Comalcalco"
|
|
class="h-24 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<h1 class="text-xl font-semibold mb-4">Atención Ciudadana</h1>
|
|
|
|
<div class="mb-4">
|
|
<DateRange v-model="dateRange" :presets="true" />
|
|
<!-- Toggle para usar datos falsos -->
|
|
<label class="inline-flex items-center text-sm text-gray-600 ml-4">
|
|
<input type="checkbox" v-model="USE_MOCK" class="mr-2 rounded border-gray-300" />
|
|
Usar datos falsos
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mb-4 flex items-center gap-4">
|
|
<div v-if="loading" class="ml-auto text-sm text-gray-500">
|
|
Cargando...
|
|
</div>
|
|
<div v-if="error" class="ml-auto text-sm text-red-600">
|
|
{{ error }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-64">
|
|
<Bars :chartData="chartData" :chartOptions="chartOptions" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div
|
|
class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-medium opacity-90">Apoyos Mes</h2>
|
|
<span >Entregados en el mes</span>
|
|
</div>
|
|
<div
|
|
class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
|
|
>
|
|
<span class="text-2xl font-bold text-green-600">20</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-medium opacity-90">Apoyos Semana</h2>
|
|
<span class="text-sm">Entregados en la semana</span>
|
|
</div>
|
|
<div
|
|
class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
|
|
>
|
|
<span class="text-2xl font-bold text-blue-600">20</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bg-gradient-to-r from-yellow-600 to-amber-700 rounded-lg shadow-lg p-6 text-white"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-lg font-medium opacity-90">Apoyos Hoy</h2>
|
|
<span class="text-sm">Entregados hoy</span>
|
|
</div>
|
|
<div
|
|
class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
|
|
>
|
|
<span class="text-2xl font-bold text-amber-600">20</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|