I could not get the table " Input Interface and Output Interface " on the sides of the Another question is to sort the entries and exits of each " Plan / Do / Check / Action ", they would have to stay in the same line as in the image below.
WhatIgotUsingCSSandHTML,listingFromthedatabasefields:
Css:
<style>body{background:rgb(204,204,204);}page{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
@media print {
body,
page {
margin: 0;
box-shadow: 0;
background: rgb(204, 204, 204);
}
}
.logo {
float:left;
}
.corpo {
border: 2px solid #ddd;
height: auto;
display: inline-block;
margin: 0;
width: -webkit-fill-available;
}
.header {
padding-top: 10px;
text-align: center;
border: 2px solid #ddd;
}
.revisao {
text-align: left;
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 11px;
position: relative;
/* left: 300px; */
float: right;
width: auto;
height: auto;
border: solid #ddd 2px;
}
#cabecalhoRel {
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 9px;
}
table {
/*border-collapse: collapse;*/
width: 100%;
font-size: 80%;
}
table th {
background-color: antiquewhite;
color: white;
text-align: left;
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 12px;
}
th,
td {
/* Tirar o comentário do border , que no imprimir aparece como jeferson gostou*/
border: 1px solid #ddd;
text-align: left;
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 9px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
/* para definir a impressão no modo paisagem */
@page {
size: landscape
}
/*fim do modo de paisagem*/
.relativeEsquerda {
position: relative;
width: 180px;
height: auto;
/*border: solid #000000 1px;*/
}
.relativeEntrada {
position: relative;
width: 150px;
height: auto;
/*border: solid #000000 1px;*/
}
.relativeProcesso {
position: relative;
/* left: 300px; */
width: 300px;
height: auto;
border: solid #ddd 1px;
}
.relativeSaida {
position: relative;
width: 200px;
height: auto;
/*border: solid #000000 1px;*/
}
.relativeDireita {
position: relative;
/* left: 600px; */
width: 200px;
height: auto;
/*border: solid #000000 1px;*/
}
[class^="rela"] {
display: inline-block;
float: left;
}
</style >
HTML :
@{
Layout = null;
var cont = 0;
string setor = "";
}
<html>
<head>
<link href="~/Areas/Qualidade/Css/RelatorioPaisagem.css" rel="stylesheet" />
@*<link href="~/Areas/Qualidade/Css/RelatorioRetrato.css" rel="stylesheet" />*@
</head>
<body>
<div class="a4_vertical">
<page size="A4">
<div class="header">
<img src="~/imagem/logo.png" class="logo" />
<div id="cabecalhoRel">
MINHA EMPRESA
<br>
MEU ENDEREÇO
<br>MEU CNPJ E TELEFONE
<br>
</div>
<div class="revisao">
@{ for (int i = 0; i < ViewBag.listaProcesso.Count; i++)
{
if (i == 0)
{
<b>Processo:</b> @ViewBag.listaProcesso[i].Numero_Processo
<br />
<b>Revisão:</b> @ViewBag.listaProcesso[i].Numero_Revisao
<br />
<b>Data Criação:</b> @ViewBag.listaProcesso[i].Data_Criacao.ToString("dd'/'MM'/'yyyy HH:mm:ss")
<br />
<b>Usuário:</b> @ViewBag.listaProcesso[i].Nome_Usuario.ToUpper()
setor = ViewBag.listaProcesso[i].Setor.ToUpper();
}
cont++;
}
}
</div>
<h4>DIAGRAMA DE PROCESSO - @setor</h4>
<br />
</div>
<div class="corpo">
<div class="relativeEsquerda">
<table class="table">
<thead>
<tr>
<th>Recursos de Materiais </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaMaterial.Count; i++)
{
<tr>
<td>@ViewBag.listaMaterial[i].Descricao</td>
</tr>
cont++;
}
}
</table>
<br />
<table class="table">
<thead>
<tr>
<th>Métodos/Processo/Técnica </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaMetodo.Count; i++)
{
<tr>
<td>@ViewBag.listaMetodo[i].Descricao</td>
</tr>
cont++;
}
}
</table>
</div>
<div class="relativeEntrada">
<table class="table">
<thead>
<tr>
<th colspan="2">Entrada </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaEntrada.Count; i++)
{
<tr>
<td>@ViewBag.listaEntrada[i].Titulo</td>
<td>@ViewBag.listaEntrada[i].Descricao</td>
</tr>
cont++;
}
}
</table>
</div>
<div class="relativeProcesso">
<table class="table">
<thead>
<tr>
<th colspan="2"><center>PROCESSO</center> </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaProcesso.Count; i++)
{
<tr>
<td>@ViewBag.listaProcesso[i].Acao</td>
<td>@ViewBag.listaProcesso[i].Titulo</td>
@*<td>@ViewBag.listaProcesso[i].Descricao</td>*@
</tr>
@*<tr>
@if(i == 0) {
<td><center><font size="12"><b>P</b></font><br />(Plan)</center></td>
}
<td>@ViewBag.listaProcesso[i].Titulo.ToUpper()</td>
</tr>
<tr>
@if (i == 0)
{
<td><center><b><font size="14">D</font><br />(Do)</b></center></td>
}
<td>@ViewBag.listaProcesso[i].Do_.ToUpper()</td>
</tr>
<tr>
@if (i == 0)
{
<td><center><b><font size="14">C</font><br />(Check)</b></center></td>
}
<td>@ViewBag.listaProcesso[i].Verifica.ToUpper()</td>
</tr>
<tr>
@if (i == 0)
{
<td><center><b><font size="14">A</font><br />(Action)</b></center></td>
}
<td>@ViewBag.listaProcesso[i].Acao.ToUpper()</td>
</tr>*@
cont++;
}
}
</table>
</div>
<div class="relativeSaida">
<table class="table">
<thead>
<tr>
<th colspan="2">Saída </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaSaida.Count; i++)
{
<tr>
<td>@ViewBag.listaSaida[i].Titulo</td>
<td>@ViewBag.listaSaida[i].Descricao</td>
</tr>
cont++;
}
}
</table>
</div>
<div class="relativeDireita">
<table class="table">
<thead>
<tr>
<th>Recursos de Pessoal </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaRecursoPessoal.Count; i++)
{
<tr>
<td>@ViewBag.listaRecursoPessoal[i].Descricao</td>
</tr>
cont++;
}
}
</table>
<br />
<table class="table">
<thead>
<tr>
<th>Medição/Monitoramento </th>
</tr>
</thead>
<tbody>
@{ for (int i = 0; i < ViewBag.listaMedicao.Count; i++)
{
<tr>
<td>@ViewBag.listaMedicao[i].Descricao</td>
</tr>
cont++;
}
}
</table>
</div>
</div>
</page>
<page size="A4"></page>
</div>
</body>
</html>