mirror of
https://origin.cursor.com/mrdevmx/panels.git
synced 2026-10-09 14:13:18 +00:00
feat: ver el programa de obra como Gantt (no la grilla de ceros)
<!-- CURSOR_AGENT_PR_BODY_BEGIN --> ## Qué pasaba El Excel que importaste es **por partida** (erogaciones semanales). Eso llena **Partidas** y el **Gantt**, no las barras de concepto. La pestaña que se abría era **Conceptos**, con 0–0 en cada semana. Además el Gantt que ya existía tenía el encabezado de semanas mal alineado. ## Cambio - **Gantt es la primera pestaña** y se abre sola si el programa es solo por partida. - Cada partida es una barra de la primera a la última semana con monto (tooltip con total). - En Conceptos, si no hay barras, se explica que hay que mirar Gantt o Partidas. ## Cómo probar 1. Mergear y recargar (solo front; no hay Liquibase). 2. Abrir Programa de obra en la obra ya importada: debe entrar en **Gantt** con barras (A001, A002, …) sobre Sem 1–9. 3. Partidas: montos semanales (no ceros). 4. Conceptos: sigue en 0 y el aviso; es normal en este Excel. <!-- CURSOR_AGENT_PR_BODY_END --> <div><a href="https://cursor.com/agents/bc-d8a5d34a-ead9-4912-8296-322cff799783?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a> <a href="https://cursor.com/background-agent?bcId=bc-d8a5d34a-ead9-4912-8296-322cff799783&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a> </div>
This commit is contained in:
Alberto Martinez
parent
0045ccd8ed
commit
17c40c66a6
4 changed files with 240 additions and 92 deletions
|
|
@ -1,28 +1,39 @@
|
|||
<template>
|
||||
<div class="gantt-panel">
|
||||
<div class="gantt-header">
|
||||
<span v-for="p in periods" :key="p.id" class="gantt-col-head">{{ p.label }}</span>
|
||||
<Message v-if="!rows.length" severity="info" :closable="false">
|
||||
{{ emptyHint }}
|
||||
</Message>
|
||||
<div v-else class="gantt" :style="{ '--weeks': String(periods.length || 1) }">
|
||||
<div class="gantt-head">
|
||||
<div class="gantt-label-col">{{ drillChapterId ? "Concepto" : "Partida" }}</div>
|
||||
<div class="gantt-scale">
|
||||
<span v-for="p in periods" :key="p.id" class="gantt-week">{{ p.label }}</span>
|
||||
</div>
|
||||
<div v-for="row in bars" :key="row.id" class="gantt-row">
|
||||
<div class="gantt-row-label">
|
||||
</div>
|
||||
<div v-for="row in rows" :key="row.id" class="gantt-row">
|
||||
<div class="gantt-label-col">
|
||||
<span class="identifier">{{ row.code }}</span>
|
||||
<span>{{ row.label }}</span>
|
||||
<span class="gantt-name">{{ row.label }}</span>
|
||||
</div>
|
||||
<div class="gantt-track">
|
||||
<div class="gantt-scale gantt-track">
|
||||
<span v-for="p in periods" :key="`t-${p.id}`" class="gantt-tick" />
|
||||
<div
|
||||
v-for="seg in row.segments"
|
||||
:key="`${row.id}-${seg.period_index}`"
|
||||
v-if="row.span"
|
||||
class="gantt-bar"
|
||||
:style="barStyle(seg)"
|
||||
:title="`${row.code} · ${seg.label}`"
|
||||
/>
|
||||
:style="{ left: `${row.span.leftPct}%`, width: `${row.span.widthPct}%` }"
|
||||
:title="row.span.title"
|
||||
>
|
||||
<span v-if="row.span.widthPct > 12" class="gantt-bar-text">{{ row.span.caption }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Message v-if="!bars.length" severity="info" :closable="false">Sin partidas programadas.</Message>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ganttSpan, periodHasAmount, periodHasConceptBar } from "~/utils/workProgramGantt";
|
||||
|
||||
type Period = { id: number; period_index: number; label: string; start_date?: string; end_date?: string };
|
||||
type ChapterRow = {
|
||||
id: number;
|
||||
|
|
@ -34,65 +45,136 @@ type ChapterRow = {
|
|||
const props = defineProps<{
|
||||
periods: Period[];
|
||||
chapters: ChapterRow[];
|
||||
drillConcepts?: { id: number; code: string; description: string; chapter_id: number | null; periods: { period_index: number; start_pct: number; end_pct: number }[] }[];
|
||||
drillConcepts?: {
|
||||
id: number;
|
||||
code: string;
|
||||
description: string;
|
||||
chapter_id: number | null;
|
||||
periods: { period_index: number; start_pct: number; end_pct: number }[];
|
||||
}[];
|
||||
drillChapterId?: number | null;
|
||||
}>();
|
||||
|
||||
const periodCount = computed(() => props.periods.length || 1);
|
||||
const money = new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN", maximumFractionDigits: 0 });
|
||||
|
||||
const bars = computed(() => {
|
||||
const emptyHint = computed(() => {
|
||||
if (props.drillChapterId) {
|
||||
return "Esta partida no tiene barras de concepto. El Excel por partida programa montos semanales; véalas en Gantt (todas las partidas) o en la pestaña Partidas.";
|
||||
}
|
||||
return "Sin partidas con erogación. Importe el Excel por partida o capture montos en Partidas.";
|
||||
});
|
||||
|
||||
const rows = computed(() => {
|
||||
if (props.drillChapterId && props.drillConcepts?.length) {
|
||||
return props.drillConcepts
|
||||
.filter((c) => c.chapter_id === props.drillChapterId)
|
||||
.map((c) => ({
|
||||
.map((c) => {
|
||||
const active = props.periods
|
||||
.map((p) => {
|
||||
const bar = periodHasConceptBar(c.periods, p);
|
||||
return bar ? p.period_index : null;
|
||||
})
|
||||
.filter((n): n is number => n != null);
|
||||
const span = ganttSpan(active, props.periods.length);
|
||||
return {
|
||||
id: c.id,
|
||||
code: c.code,
|
||||
label: c.description,
|
||||
segments: props.periods
|
||||
.map((p) => {
|
||||
const slot = c.periods.find((x) => x.period_index === p.period_index);
|
||||
if (!slot || (slot.start_pct === 0 && slot.end_pct === 0)) return null;
|
||||
return { period_index: p.period_index, label: p.label, start_pct: slot.start_pct, end_pct: slot.end_pct };
|
||||
})
|
||||
.filter(Boolean) as { period_index: number; label: string; start_pct: number; end_pct: number }[],
|
||||
}));
|
||||
span: span
|
||||
? {
|
||||
...span,
|
||||
caption: `${span.first}–${span.last}`,
|
||||
title: `${c.code} · Sem ${span.first} a ${span.last}`,
|
||||
}
|
||||
return props.chapters.map((ch) => ({
|
||||
: null,
|
||||
};
|
||||
})
|
||||
.filter((row) => row.span);
|
||||
}
|
||||
|
||||
return props.chapters
|
||||
.map((ch) => {
|
||||
const weeks = props.periods
|
||||
.map((p) => ({ p, amount: periodHasAmount(ch.periods, p) }))
|
||||
.filter((x) => x.amount > 0);
|
||||
const span = ganttSpan(weeks.map((x) => x.p.period_index), props.periods.length);
|
||||
const total = weeks.reduce((s, x) => s + x.amount, 0);
|
||||
return {
|
||||
id: ch.id,
|
||||
code: ch.code,
|
||||
label: ch.name,
|
||||
segments: props.periods
|
||||
.map((p) => {
|
||||
const slot = ch.periods.find((x) => x.period_index === p.period_index);
|
||||
if (!slot || Number(slot.amount) <= 0) return null;
|
||||
return { period_index: p.period_index, label: p.label, start_pct: 0, end_pct: 100 };
|
||||
span: span
|
||||
? {
|
||||
...span,
|
||||
caption: money.format(total),
|
||||
title: `${ch.code} ${ch.name} · Sem ${span.first}–${span.last} · ${money.format(total)}`,
|
||||
}
|
||||
: null,
|
||||
};
|
||||
})
|
||||
.filter(Boolean) as { period_index: number; label: string; start_pct: number; end_pct: number }[],
|
||||
}));
|
||||
.filter((row) => row.span);
|
||||
});
|
||||
|
||||
function barStyle(seg: { period_index: number; start_pct: number; end_pct: number }) {
|
||||
const n = periodCount.value;
|
||||
const colW = 100 / n;
|
||||
const left = (seg.period_index - 1) * colW + (seg.start_pct / 100) * colW;
|
||||
const width = Math.max(1, ((seg.end_pct - seg.start_pct) / 100) * colW);
|
||||
return { left: `${left}%`, width: `${width}%` };
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gantt-panel { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0; }
|
||||
.gantt-header { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem; font-size: 0.7rem; color: var(--text-color-secondary); }
|
||||
.gantt-col-head { text-align: center; }
|
||||
.gantt-row { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem; align-items: center; min-height: 2rem; }
|
||||
.gantt-row-label { display: flex; flex-direction: column; font-size: 0.8rem; overflow: hidden; }
|
||||
.gantt-track { position: relative; height: 1.25rem; background: var(--surface-100); border-radius: 4px; }
|
||||
.gantt-panel { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
|
||||
.gantt { display: flex; flex-direction: column; gap: 0.35rem; overflow: auto; }
|
||||
.gantt-head,
|
||||
.gantt-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(11rem, 16rem) minmax(24rem, 1fr);
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
.gantt-label-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.gantt-name {
|
||||
color: var(--text-color-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.gantt-scale {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
|
||||
position: relative;
|
||||
min-height: 1.6rem;
|
||||
}
|
||||
.gantt-week {
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
.gantt-track {
|
||||
background: var(--surface-100);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gantt-tick {
|
||||
border-right: 1px solid color-mix(in srgb, var(--surface-border) 70%, transparent);
|
||||
}
|
||||
.gantt-tick:last-child { border-right: none; }
|
||||
.gantt-bar {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 3px;
|
||||
opacity: 0.85;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 4px;
|
||||
}
|
||||
.gantt-bar-text {
|
||||
font-size: 0.65rem;
|
||||
color: var(--primary-color-text, #fff);
|
||||
padding: 0 0.35rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ type Preview = {
|
|||
};
|
||||
|
||||
const props = defineProps<{ visible: boolean; projectId: number; projectName: string }>();
|
||||
const emit = defineEmits<{ "update:visible": [boolean]; imported: [] }>();
|
||||
const emit = defineEmits<{ "update:visible": [boolean]; imported: [{ format: string }] }>();
|
||||
|
||||
const { api } = useApi();
|
||||
const toast = useToast();
|
||||
|
|
@ -144,7 +144,7 @@ async function confirm() {
|
|||
fd.append("file", pending.value);
|
||||
await api(`/v1/projects/${props.projectId}/work-program/import?create_chapters=true`, { method: "POST", body: fd });
|
||||
toast.add({ severity: "success", summary: "Programa importado", life: 2500 });
|
||||
emit("imported");
|
||||
emit("imported", { format: preview.value.format });
|
||||
visibleModel.value = false;
|
||||
preview.value = null;
|
||||
pending.value = null;
|
||||
|
|
|
|||
|
|
@ -29,13 +29,23 @@
|
|||
|
||||
<template v-else>
|
||||
<TabView v-model:active-index="activeTab" class="programa-tabs">
|
||||
<TabPanel header="Conceptos">
|
||||
<WorkProgramGrid
|
||||
mode="concept"
|
||||
<TabPanel header="Gantt">
|
||||
<div class="gantt-toolbar mb-2">
|
||||
<Select
|
||||
v-model="ganttChapterId"
|
||||
:options="ganttChapterOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
placeholder="Todas las partidas"
|
||||
show-clear
|
||||
class="gantt-select"
|
||||
/>
|
||||
</div>
|
||||
<WorkProgramGantt
|
||||
:periods="periods"
|
||||
:rows="conceptRows"
|
||||
:project-id="loadedProjectId"
|
||||
@updated="reload"
|
||||
:chapters="ganttChapters"
|
||||
:drill-chapter-id="ganttChapterId"
|
||||
:drill-concepts="ganttConcepts"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel header="Partidas">
|
||||
|
|
@ -54,23 +64,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Gantt">
|
||||
<div class="gantt-toolbar mb-2">
|
||||
<Select
|
||||
v-model="ganttChapterId"
|
||||
:options="ganttChapterOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
placeholder="Todas las partidas"
|
||||
show-clear
|
||||
class="gantt-select"
|
||||
/>
|
||||
</div>
|
||||
<WorkProgramGantt
|
||||
<TabPanel header="Conceptos">
|
||||
<Message v-if="partidaOnly" severity="info" :closable="false" class="mb-2">
|
||||
Este programa se importó por partida (erogaciones). Las barras de concepto quedan en 0.
|
||||
El Gantt y la pestaña Partidas muestran las semanas programadas.
|
||||
</Message>
|
||||
<WorkProgramGrid
|
||||
mode="concept"
|
||||
:periods="periods"
|
||||
:chapters="ganttChapters"
|
||||
:drill-chapter-id="ganttChapterId"
|
||||
:drill-concepts="ganttConcepts"
|
||||
:rows="conceptRows"
|
||||
:project-id="loadedProjectId"
|
||||
@updated="reload"
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel v-if="showCostTab" header="Programado vs costos">
|
||||
|
|
@ -172,8 +176,22 @@ const ganttChapterOptions = computed(() =>
|
|||
})),
|
||||
);
|
||||
|
||||
const partidaOnly = computed(() => {
|
||||
const hasPartida = partidaChapters.value.some((c) =>
|
||||
((c.periods as { amount?: number }[]) || []).some((p) => Number(p.amount) > 0),
|
||||
);
|
||||
const hasConcept = conceptItems.value.some((c) =>
|
||||
((c.periods as { start_pct?: number; end_pct?: number }[]) || []).some(
|
||||
(p) => Number(p.start_pct) > 0 || Number(p.end_pct) > 0,
|
||||
),
|
||||
);
|
||||
return hasPartida && !hasConcept;
|
||||
});
|
||||
|
||||
const ganttChapters = computed(() =>
|
||||
partidaChapters.value.map((c) => ({
|
||||
partidaChapters.value
|
||||
.filter((c) => matches(c.code, c.name))
|
||||
.map((c) => ({
|
||||
id: Number(c.id),
|
||||
code: String(c.code || ""),
|
||||
name: String(c.name || ""),
|
||||
|
|
@ -219,14 +237,25 @@ async function loadProgram(id: number) {
|
|||
const [concepts, partidas, vs] = await Promise.all([
|
||||
api<{ items: Record<string, unknown>[] }>(`/v1/projects/${id}/work-program/concepts`),
|
||||
api<{ chapters: Record<string, unknown>[] }>(`/v1/projects/${id}/work-program/partidas`),
|
||||
api<{ by_period: Record<string, unknown>[]; by_chapter: Record<string, unknown>[] }>(
|
||||
showCostTab.value
|
||||
? api<{ by_period: Record<string, unknown>[]; by_chapter: Record<string, unknown>[] }>(
|
||||
`/v1/projects/${id}/work-program/vs-cost`,
|
||||
),
|
||||
).catch(() => ({ by_period: [], by_chapter: [] }))
|
||||
: Promise.resolve({ by_period: [], by_chapter: [] }),
|
||||
]);
|
||||
conceptItems.value = concepts.items || [];
|
||||
partidaChapters.value = partidas.chapters || [];
|
||||
vsCostPeriods.value = vs.by_period || [];
|
||||
vsCostChapters.value = vs.by_chapter || [];
|
||||
const hasPartida = (partidas.chapters || []).some((c) =>
|
||||
((c.periods as { amount?: number }[]) || []).some((p) => Number(p.amount) > 0),
|
||||
);
|
||||
const hasConcept = (concepts.items || []).some((c) =>
|
||||
((c.periods as { start_pct?: number; end_pct?: number }[]) || []).some(
|
||||
(p) => Number(p.start_pct) > 0 || Number(p.end_pct) > 0,
|
||||
),
|
||||
);
|
||||
if (hasPartida && !hasConcept) activeTab.value = 0;
|
||||
} else {
|
||||
conceptItems.value = [];
|
||||
partidaChapters.value = [];
|
||||
|
|
|
|||
37
web-panel/utils/workProgramGantt.ts
Normal file
37
web-panel/utils/workProgramGantt.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/** period_index is 1-based (Sem 1 … Sem N). */
|
||||
export function ganttSpan(
|
||||
activeIndexes: number[],
|
||||
periodCount: number,
|
||||
): { leftPct: number; widthPct: number; first: number; last: number } | null {
|
||||
const n = Number(periodCount) || 0;
|
||||
const idxs = activeIndexes.filter((i) => Number.isFinite(i) && i >= 1 && (n <= 0 || i <= n));
|
||||
if (!idxs.length || n <= 0) return null;
|
||||
const first = Math.min(...idxs);
|
||||
const last = Math.max(...idxs);
|
||||
return {
|
||||
first,
|
||||
last,
|
||||
leftPct: ((first - 1) / n) * 100,
|
||||
widthPct: ((last - first + 1) / n) * 100,
|
||||
};
|
||||
}
|
||||
|
||||
export function periodHasAmount(
|
||||
periods: { period_id?: number; period_index?: number; amount?: number }[],
|
||||
week: { id: number; period_index: number },
|
||||
): number {
|
||||
const slot = periods.find((x) => x.period_index === week.period_index || x.period_id === week.id);
|
||||
return Number(slot?.amount || 0);
|
||||
}
|
||||
|
||||
export function periodHasConceptBar(
|
||||
periods: { period_index?: number; start_pct?: number; end_pct?: number }[],
|
||||
week: { period_index: number },
|
||||
): { start_pct: number; end_pct: number } | null {
|
||||
const slot = periods.find((x) => x.period_index === week.period_index);
|
||||
if (!slot) return null;
|
||||
const start = Number(slot.start_pct || 0);
|
||||
const end = Number(slot.end_pct || 0);
|
||||
if (start === 0 && end === 0) return null;
|
||||
return { start_pct: start, end_pct: Math.max(start, end) };
|
||||
}
|
||||
Loading…
Reference in a new issue