mirror of
https://origin.cursor.com/mrdevmx/panels.git
synced 2026-10-09 18:43:18 +00:00
dc510236c5
Implementa el módulo completo de programa de obra vinculado al presupuesto: - Schema PostgreSQL: work_programs, periods, concept_slots, partida_amounts, progress - RPC: CRUD, import replace, generate wizard, recalculate partidas, vs-cost - API: parser Excel Neodata (concepto Barra= + partida erogaciones), endpoints REST - UI: página /programa-obra con cuadrículas, Gantt, comparativo programado/ejecutado - Integración: menú, ficha proyecto, banner en presupuesto, permiso manage_budget Co-authored-by: alberto.martinez <alberto.martinez@mrdev.mx>
84 lines
3.3 KiB
Vue
84 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="summary.length" class="kpi-row mb-3">
|
|
<div class="kpi-card">
|
|
<span class="kpi-label">Programado total</span>
|
|
<strong>{{ money(totalScheduled) }}</strong>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<span class="kpi-label">Ejecutado total</span>
|
|
<strong>{{ money(totalExecuted) }}</strong>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<span class="kpi-label">Δ acumulado</span>
|
|
<strong :class="deltaClass">{{ money(totalExecuted - totalScheduled) }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<DataTable :value="summary" scrollable scroll-height="40vh" size="small" table-style="min-width: 52rem">
|
|
<Column field="label" header="Semana" />
|
|
<Column field="scheduled_amount" header="Programado">
|
|
<template #body="{ data }">{{ money(data.scheduled_amount) }}</template>
|
|
</Column>
|
|
<Column field="executed_amount" header="Ejecutado">
|
|
<template #body="{ data }">{{ money(data.executed_amount) }}</template>
|
|
</Column>
|
|
<Column header="Δ">
|
|
<template #body="{ data }">
|
|
<span :class="Number(data.executed_amount) > Number(data.scheduled_amount) ? 'cost-critical-text' : ''">
|
|
{{ money(Number(data.executed_amount) - Number(data.scheduled_amount)) }}
|
|
</span>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
|
|
<div class="section-title mt-4 mb-2">Por partida</div>
|
|
<DataTable :value="byChapter" size="small" scrollable scroll-height="28vh">
|
|
<Column field="chapter_code" header="Código" style="width: 6rem" />
|
|
<Column field="chapter_name" header="Partida" />
|
|
<Column field="scheduled_amount" header="Programado">
|
|
<template #body="{ data }">{{ money(data.scheduled_amount) }}</template>
|
|
</Column>
|
|
<Column field="executed_amount" header="Ejecutado">
|
|
<template #body="{ data }">{{ money(data.executed_amount) }}</template>
|
|
</Column>
|
|
<Column field="budget_amount" header="Presupuesto">
|
|
<template #body="{ data }">{{ money(data.budget_amount) }}</template>
|
|
</Column>
|
|
</DataTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
byPeriod: { label: string; scheduled_amount: number; executed_amount: number }[];
|
|
byChapter: { chapter_code: string; chapter_name: string; scheduled_amount: number; executed_amount: number; budget_amount: number }[];
|
|
}>();
|
|
|
|
const summary = computed(() => props.byPeriod || []);
|
|
const byChapter = computed(() => props.byChapter || []);
|
|
|
|
const totalScheduled = computed(() => summary.value.reduce((s, r) => s + Number(r.scheduled_amount || 0), 0));
|
|
const totalExecuted = computed(() => summary.value.reduce((s, r) => s + Number(r.executed_amount || 0), 0));
|
|
const deltaClass = computed(() => (totalExecuted.value > totalScheduled.value ? "cost-critical-text" : ""));
|
|
|
|
function money(v: number) {
|
|
return new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN" }).format(Number(v || 0));
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.kpi-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
|
.kpi-card {
|
|
flex: 1;
|
|
min-width: 9rem;
|
|
padding: 0.65rem 0.85rem;
|
|
border: 1px solid var(--surface-border);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
.kpi-label { font-size: 0.75rem; color: var(--text-color-secondary); }
|
|
.section-title { font-weight: 600; font-size: 0.9rem; }
|
|
</style>
|