lxluxo23/sacg-cronogramas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Color de fondo de tablas

Browse Source
This commit is contained in:
JuanSanhueza 2025-05-02 14:59:02 -04:00
parent b8e07bf300
commit 7db758690c
9 changed files with 133 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/navbar/navbar.component.html
View File

@ -22,7 +22,7 @@
<div class="page-header">
<div class="page-title">{{ pageTitle }}</div>
<div class="breadcrumb-container">
<a routerLink="/dashboard" class="breadcrumb-link">Home</a>
<a routerLink="/dashboard" class="breadcrumb-link">Inicio</a>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-current">{{ pageTitle }}</span>
</div>

36
src/app/pages/actualizacion-pd/actualizacion-pd.component.html
View File

@ -1,20 +1,20 @@
<div class="p-3 text-white">
<div class="flex justify-content-center flex-wrap">
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Resumen</div>
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
<div class="flex align-items-center justify-content-center px-5 py-3 tablaAzul font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
</div>
<div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
<div class="col-12 md:col-3 lg:col-2 bg-blue-400 border-round ">
<div class="col-12 md:col-3 lg:col-2 tablaAzul border-round ">
<div class="border-round font-bold ">
<div class="h-4rem">Filtro Empresa</div>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</div>
<div class="col-12 md:col-3 lg:col-2 bg-blue-400 border-round">
<div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
<div class="border-round font-bold">
<div class="h-4rem">Filtro Código Cronograma</div>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
@ -23,7 +23,7 @@
</div>
<!-- Tabla1 -->
<div class="font-bold my-2 tituloTabla">Título de la tabla:</div>
<p-table class="mi-tabla-redondeada"
<p-table id="azul"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -33,18 +33,18 @@
[rowsPerPageOptions]="[5, 10, 20]">
<ng-template #header>
<tr>
<th class="bg-blue-400 font-bold text-white">Empresa</th>
<th class="bg-blue-400 font-bold text-white">Código de cronograma</th>
<th class="bg-blue-400 font-bold text-white">Etapa del Servicio</th>
<th class="bg-blue-400 font-bold text-white">Nombre sistema</th>
<th class="bg-blue-400 font-bold text-white">Tipo de inversión</th>
<th class="bg-blue-400 font-bold text-white">Código de glosa PD</th>
<th class="bg-blue-400 font-bold text-white">Descripción glosa</th>
<th class="bg-blue-400 font-bold text-white">Monto Inversión Total (UF)</th>
<th class="bg-blue-400 font-bold text-white">Año de Inicio</th>
<th class="bg-blue-400 font-bold text-white">Año de Término</th>
<th class="bg-blue-400 font-bold text-white">Mes de Término</th>
<th class="bg-blue-400 font-bold text-white">Nota</th>
<th class="tablaAzul font-bold text-white">Empresa</th>
<th class="tablaAzul font-bold text-white">Código de cronograma</th>
<th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
<th class="tablaAzul font-bold text-white">Nombre sistema</th>
<th class="tablaAzul font-bold text-white">Tipo de inversión</th>
<th class="tablaAzul font-bold text-white">Código de glosa PD</th>
<th class="tablaAzul font-bold text-white">Descripción glosa</th>
<th class="tablaAzul font-bold text-white">Monto Inversión Total (UF)</th>
<th class="tablaAzul font-bold text-white">Año de Inicio</th>
<th class="tablaAzul font-bold text-white">Año de Término</th>
<th class="tablaAzul font-bold text-white">Mes de Término</th>
<th class="tablaAzul font-bold text-white">Nota</th>
<th class="bg-green-400 font-bold text-white">Estado aprobación</th>
<th class="bg-green-400 font-bold text-white">Observación</th>
</tr>
@ -63,12 +63,12 @@
<td>{{ product.dato10 }}</td>
<td>{{ product.dato11 }}</td>
<td>{{ product.dato12 }}</td>
<td>
<td class="bg-verde">
<div class="border-round font-bold">
<p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</td>
<td>
<td class="bg-verde">
<input
type="analista"
pInputText

5
src/app/pages/actualizacion-pd/actualizacion-pd.component.scss
View File

@ -1,5 +0,0 @@
::v-deep(.mi-tabla-redondeada .p-datatable-wrapper) {
border-radius: 12px;
border: 1px solid var(--surface-border);
overflow: hidden;
}

50
src/app/pages/ajuste-pd/ajuste-pd.component.html
View File

@ -2,19 +2,19 @@
<div class="flex justify-content-center flex-wrap">
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Resumen</div>
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
<div class="flex align-items-center justify-content-center px-5 py-3 tablaAzul font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
</div>
<div class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1">
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round ">
<div class="col-6 md:col-3 lg:col-2 tablaAzul border-round ">
<div class="border-round font-bold ">
<div class="h-4rem">Filtro Empresa</div>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</div>
<div class="col-6 md:col-3 lg:col-2 bg-blue-400 border-round">
<div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
<div class="border-round font-bold">
<div class="h-4rem">Filtro Código Cronograma</div>
<p-select [options]="empresas" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
@ -23,7 +23,7 @@
</div>
<!-- Tabla1 -->
<!-- <div class="font-bold text-black-alpha-90 my-2">Título de la tabla:</div> -->
<p-table class="mi-tabla-redondeada"
<p-table id="azul"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -34,28 +34,28 @@
<ng-template #header>
<tr>
<th colspan="10" style="background-color: #F8F9FA;border: none;"></th>
<th colspan="3" class="bg-blue-400 text-white font-bold text-center">Cronograma base vigente</th>
<th colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
<th colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
</tr>
<tr>
<th class="bg-blue-400 text-white font-bold">Empresa</th>
<th class="bg-blue-400 text-white font-bold">Código de cronograma</th>
<th class="bg-blue-400 text-white font-bold">Etapa del Servicio</th>
<th class="bg-blue-400 text-white font-bold">Nombre sistema</th>
<th class="bg-blue-400 text-white font-bold">Nombre sistema</th>
<th class="bg-blue-400 text-white font-bold">Nombre localidad</th>
<th class="bg-blue-400 text-white font-bold">Tipo de inversión</th>
<th class="bg-blue-400 text-white font-bold">Código de glosa PD</th>
<th class="bg-blue-400 text-white font-bold">Descripción glosa</th>
<th class="bg-blue-400 text-white font-bold">Monto Inversión Total (UF)</th>
<th class="bg-blue-400 text-white font-bold">Año de Inicio</th>
<th class="bg-blue-400 text-white font-bold">Año de Término</th>
<th class="bg-blue-400 text-white font-bold">Mes de Término</th>
<th class="tablaAzul text-white font-bold">Empresa</th>
<th class="tablaAzul text-white font-bold">Código de cronograma</th>
<th class="tablaAzul text-white font-bold">Etapa del Servicio</th>
<th class="tablaAzul text-white font-bold">Nombre sistema</th>
<th class="tablaAzul text-white font-bold">Nombre sistema</th>
<th class="tablaAzul text-white font-bold">Nombre localidad</th>
<th class="tablaAzul text-white font-bold">Tipo de inversión</th>
<th class="tablaAzul text-white font-bold">Código de glosa PD</th>
<th class="tablaAzul text-white font-bold">Descripción glosa</th>
<th class="tablaAzul text-white font-bold">Monto Inversión Total (UF)</th>
<th class="tablaAzul text-white font-bold">Año de Inicio</th>
<th class="tablaAzul text-white font-bold">Año de Término</th>
<th class="tablaAzul text-white font-bold">Mes de Término</th>
<th class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
<th class="bg-blue-700 text-white font-bold">Año de Inicio</th>
<th class="bg-blue-700 text-white font-bold">Año de Término</th>
<th class="bg-blue-700 text-white font-bold">Mes de Término</th>
<th class="bg-blue-400 text-white font-bold">Nota</th>
<th class="tablaAzul text-white font-bold">Nota</th>
<th class="bg-green-400 text-white font-bold">Estado aprobación</th>
<th class="bg-green-400 text-white font-bold">Observación</th>
</tr>
@ -75,17 +75,17 @@
<td>{{ product.dato13 }}</td>
<td>{{ product.dato14 }}</td>
<td>{{ product.dato15 }}</td>
<td>{{ product.dato16 }}</td>
<td>{{ product.dato17 }}</td>
<td>{{ product.dato18 }}</td>
<td>{{ product.dato11 }}</td>
<td class="bg-azulFuerte">{{ product.dato16 }}</td>
<td class="bg-azulFuerte">{{ product.dato17 }}</td>
<td class="bg-azulFuerte">{{ product.dato18 }}</td>
<td class="bg-azulFuerte">{{ product.dato11 }}</td>
<td>{{ product.dato12 }}</td>
<td>
<td class="bg-verde">
<div class="border-round font-bold">
<p-select [options]="estadoAprobacion" [(ngModel)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
</div>
</td>
<td>
<td class="bg-verde">
<input
type="analista"
pInputText

5
src/app/pages/ajuste-pd/ajuste-pd.component.scss
View File

@ -1,5 +0,0 @@
::v-deep(.mi-tabla-redondeada .p-datatable-wrapper) {
border-radius: 12px;
border: 1px solid var(--surface-border);
overflow: hidden;
}

12
src/app/pages/concesiones/concesiones.component.html
View File

@ -1,7 +1,7 @@
<div class="p-3 text-white">
<!-- Tabla1 -->
<div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
<p-table
<p-table id="azul"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -27,8 +27,8 @@
<td>{{ product.codigoCronograma }}</td>
<td>{{ product.codigoCronogramaAjuste }}</td>
<td>{{ product.tipoCarga }}</td>
<td>{{ product.estadoRevision }}</td>
<td>
<td class="bg-verde">{{ product.estadoRevision }}</td>
<td class="bg-verde">
<!-- analista -->
<input
type="analista"
@ -40,8 +40,8 @@
style="background-color: white; color: black;width: 228px !important;"
/>
</td>
<td>{{ product.fechaIngreso }}</td>
<td>
<td class="bg-verde">{{ product.fechaIngreso }}</td>
<td class="bg-verde">
<!-- {{ product.semaforo }} -->
<div class="text-center">
<i class="pi pi-circle-fill" style="font-size: 24px;"
@ -98,7 +98,7 @@
<!-- Tabla2 -->
<div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
<p-table sortField="price" [sortOrder]="-1"
<p-table id="azul" sortField="price" [sortOrder]="-1"
[value]="products" stripedRows
showGridlines
[paginator]="true"

14
src/app/pages/resumen/resumen.component.html
View File

@ -1,12 +1,12 @@
<div class="p-3 text-white">
<div class="flex justify-content-center flex-wrap">
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-400 font-bold border-round my-1 mr-2">Resumen</div>
<div class="flex align-items-center justify-content-center px-5 py-3 tablaAzul font-bold border-round my-1 mr-2">Resumen</div>
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revisión de actualizaciones de PD</div>
<div class="flex align-items-center justify-content-center px-5 py-3 bg-blue-700 font-bold border-round my-1 mr-2">Revision de ajustes de PD</div>
</div>
<!-- Tabla1 -->
<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
<p-table class="mi-tabla-redondeada"
<p-table id="verde"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -38,7 +38,7 @@
</p-table>
<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
<p-table class="mi-tabla-redondeada"
<p-table id="ploma"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -48,10 +48,10 @@
[rowsPerPageOptions]="[5, 10, 20]">
<ng-template #header>
<tr>
<th class="surface-400 text-white font-bold">Empresa</th>
<th class="surface-400 text-white font-bold">Código de cronograma</th>
<th class="surface-400 text-white font-bold">Nombre sistema</th>
<th class="surface-400 text-white font-bold">Tipo</th>
<th class="tablaPloma text-white font-bold">Empresa</th>
<th class="tablaPloma text-white font-bold">Código de cronograma</th>
<th class="tablaPloma text-white font-bold">Nombre sistema</th>
<th class="tablaPloma text-white font-bold">Tipo</th>
</tr>
</ng-template>
<ng-template #body let-product>

28
src/app/pages/unidad-informacion/unidad-informacion.component.html
View File

@ -1,7 +1,7 @@
<div class="p-3 text-white">
<!-- Tabla1 -->
<div class="font-bold tituloTabla my-2">Cronogramas solicitados y pendientes de carga:</div>
<p-table class="mi-tabla-redondeada"
<p-table id="azul"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -11,12 +11,12 @@
[rowsPerPageOptions]="[5, 10, 20]">
<ng-template #header>
<tr>
<th class="bg-blue-400 text-white font-bold">Empresa</th>
<th class="bg-blue-400 text-white font-bold">Código de cronograma SINAR</th>
<th class="bg-blue-400 text-white font-bold">Contiene obras del año</th>
<th class="bg-blue-400 text-white font-bold">N° Oficio que aprueba</th>
<th class="bg-blue-400 text-white font-bold">Tipo de carga</th>
<th class="bg-blue-400 text-white font-bold">Fecha de solicitud</th>
<th class="tablaAzul text-white font-bold">Empresa</th>
<th class="tablaAzul text-white font-bold">Código de cronograma SINAR</th>
<th class="tablaAzul text-white font-bold">Contiene obras del año</th>
<th class="tablaAzul text-white font-bold">N° Oficio que aprueba</th>
<th class="tablaAzul text-white font-bold">Tipo de carga</th>
<th class="tablaAzul text-white font-bold">Fecha de solicitud</th>
</tr>
</ng-template>
<ng-template #body let-product>
@ -32,7 +32,7 @@
</p-table>
<!-- Tabla2 -->
<div class="font-bold tituloTabla my-2">Cronogramas aprobados:</div>
<p-table class="mi-tabla-redondeada"
<p-table id="verde"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -61,7 +61,7 @@
</p-table>
<!-- Tabla3 -->
<div class="font-bold tituloTabla my-2">Cronogramas rechazados:</div>
<p-table class="mi-tabla-redondeada"
<p-table id="ploma"
[value]="products" stripedRows
showGridlines
[paginator]="true"
@ -71,11 +71,11 @@
[rowsPerPageOptions]="[5, 10, 20]">
<ng-template #header>
<tr>
<th class="surface-400 text-white font-bold">Empresa</th>
<th class="surface-400 text-white font-bold">Código de cronograma</th>
<th class="surface-400 text-white font-bold">Nombre sistema</th>
<th class="surface-400 text-white font-bold">Tipo</th>
<th class="surface-400 text-white font-bold">Fecha rechazo</th>
<th class="tablaPloma text-white font-bold">Empresa</th>
<th class="tablaPloma text-white font-bold">Código de cronograma</th>
<th class="tablaPloma text-white font-bold">Nombre sistema</th>
<th class="tablaPloma text-white font-bold">Tipo</th>
<th class="tablaPloma text-white font-bold">Fecha rechazo</th>
</tr>
</ng-template>
<ng-template #body let-product>

64
src/styles.scss
View File

@ -56,16 +56,76 @@
color: white !important;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
#azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
--p-datatable-row-striped-background: #EAF3FB;
background: var(--p-datatable-row-striped-background);
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
#azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
--p-datatable-row-striped-background: #BCDAEF;
background: var(--p-datatable-row-striped-background);
}
.tablaVerde{
background-color: #008BC6 !important;
color: white !important;
}
#verde .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
--p-datatable-row-striped-background: #F5F9F5;
background: var(--p-datatable-row-striped-background);
}
#verde .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
--p-datatable-row-striped-background: #D0E1CD;
background: var(--p-datatable-row-striped-background);
}
.tablaPloma {
background-color: #706f6f !important;
color: white !important;
}
#ploma .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
--p-datatable-row-striped-background: #E7E7E7;
background: var(--p-datatable-row-striped-background);
}
#ploma .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
--p-datatable-row-striped-background: #CBCBCB;
background: var(--p-datatable-row-striped-background);
}
.tablaVerde {
background-color: #706f6f !important;
color: white !important;
}
#azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) > td.bg-verde {
--p-datatable-row-striped-background: #F5F9F5;
background: var(--p-datatable-row-striped-background);
}
#azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) > td.bg-verde {
--p-datatable-row-striped-background: #D0E1CD;
background: var(--p-datatable-row-striped-background);
}
.tablaAzulFuerte{
background-color: #156082 !important;
color: white !important;
}
#azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) > td.bg-azulFuerte {
--p-datatable-row-striped-background: #DCEAF7;
background: var(--p-datatable-row-striped-background);
}
#azul .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) > td.bg-azulFuerte {
--p-datatable-row-striped-background: #A6CAEC;
background: var(--p-datatable-row-striped-background);
}
/* Para redondear esquinas de tablas */
.p-datatable-table-container{
border-radius: var(--p-content-border-radius) !important;